Skip to content

Change Geo Login flow in React-Vite and NextJs to not show Login when already logged in #522

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 1, 2025
Merged

Change Geo Login flow in React-Vite and NextJs to not show Login when already logged in #522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7c71748
Change geo Login flow
pranavdaa Aug 29, 2025
ba7b189
LogIN changes made to NextJs template as well
pranavdaa Aug 29, 2025
939ac49
remove duplicated code
nikgraf Sep 1, 2025
5bae469
add changeset
nikgraf Sep 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/lazy-birds-wait.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"create-hypergraph": patch
---

improve geo connect box based on authentication state in all templates

49 changes: 42 additions & 7 deletions apps/template-nextjs/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,26 @@
'use client';

import { useHypergraphApp, useHypergraphAuth } from '@graphprotocol/hypergraph-react';
import Image from 'next/image';
import Link from 'next/link';

import { LoginButton } from '@/Components/Login/LoginButton';
import { Button } from '@/Components/ui/button';

export default function HomePage() {
const { redirectToConnect } = useHypergraphApp();
const { authenticated } = useHypergraphAuth();

const handleSignIn = () => {
redirectToConnect({
storage: localStorage,
connectUrl: 'https://connect.geobrowser.io/',
successUrl: `${window.location.origin}/authenticate-success`,
redirectFn: (url: URL) => {
window.location.href = url.toString();
},
});
};

return (
<div className="container mx-auto px-4 py-8">
<div className="text-center mb-12">
Expand All @@ -25,6 +41,7 @@ export default function HomePage() {
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
Expand All @@ -46,7 +63,7 @@ export default function HomePage() {
</div>
</div>

{/* Section 2: Sign in with Geo Connect */}
{/* Section 2: Conditional content based on authentication */}
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-200 dark:border-gray-700">
<div className="text-center">
<div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center mx-auto mb-4">
Expand All @@ -55,6 +72,7 @@ export default function HomePage() {
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
Expand All @@ -64,11 +82,27 @@ export default function HomePage() {
/>
</svg>
</div>
<h3 className="text-xl font-semibold mb-3">Manage Your Data</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Sign in with Geo Connect to manage your private data and publish it to the public Knowledge Graph.
</p>
<LoginButton />
{authenticated ? (
<>
<h3 className="text-xl font-semibold mb-3">Go to Geo Connect</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Go to Geo Connect to manage your private data and publish it to the public Knowledge Graph.
</p>
<Button onClick={handleSignIn} className="w-full bg-primary hover:bg-primary/90">
Go to Geo Connect
</Button>
</>
) : (
<>
<h3 className="text-xl font-semibold mb-3">Manage Your Data</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Sign in with Geo Connect to manage your private data and publish it to the public Knowledge Graph.
</p>
<Button onClick={handleSignIn} className="w-full bg-primary hover:bg-primary/90">
Sign in with Geo Connect
</Button>
</>
)}
</div>
</div>

Expand All @@ -81,6 +115,7 @@ export default function HomePage() {
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
Expand Down
38 changes: 28 additions & 10 deletions apps/template-vite-react/src/routes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { Button } from '@/components/ui/button';
import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
import { Link, createFileRoute } from '@tanstack/react-router';
import { useHypergraphApp, useHypergraphAuth } from '@graphprotocol/hypergraph-react';
import { createFileRoute, Link } from '@tanstack/react-router';

export const Route = createFileRoute('/')({
component: Index,
});

function Index() {
const { redirectToConnect } = useHypergraphApp();
const { authenticated } = useHypergraphAuth();

const handleSignIn = () => {
redirectToConnect({
Expand Down Expand Up @@ -40,6 +41,7 @@ function Index() {
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
Expand All @@ -61,7 +63,7 @@ function Index() {
</div>
</div>

{/* Section 2: Sign in with Geo Connect */}
{/* Section 2: Conditional content based on authentication */}
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-200 dark:border-gray-700">
<div className="text-center">
<div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center mx-auto mb-4">
Expand All @@ -70,6 +72,7 @@ function Index() {
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
Expand All @@ -79,13 +82,27 @@ function Index() {
/>
</svg>
</div>
<h3 className="text-xl font-semibold mb-3">Manage Your Data</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Sign in with Geo Connect to manage your private data and publish it to the public Knowledge Graph.
</p>
<Button onClick={handleSignIn} className="w-full bg-primary hover:bg-primary/90">
Sign in with Geo Connect
</Button>
{authenticated ? (
<>
<h3 className="text-xl font-semibold mb-3">Go to Geo Connect</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Go to Geo Connect to manage your private data and publish it to the public Knowledge Graph.
</p>
<Button onClick={handleSignIn} className="w-full bg-primary hover:bg-primary/90">
Go to Geo Connect
</Button>
</>
) : (
<>
<h3 className="text-xl font-semibold mb-3">Manage Your Data</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Sign in with Geo Connect to manage your private data and publish it to the public Knowledge Graph.
</p>
<Button onClick={handleSignIn} className="w-full bg-primary hover:bg-primary/90">
Sign in with Geo Connect
</Button>
</>
)}
</div>
</div>

Expand All @@ -98,6 +115,7 @@ function Index() {
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
Expand Down
Loading