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

Co-authored-by: Nik Graf <[email protected]>

Author: pranavdaa

.changeset/lazy-birds-wait.md

@@ -0,0 +1,6 @@
+---
+"create-hypergraph": patch
+---
+
+improve geo connect box based on authentication state in all templates
+  

apps/template-nextjs/app/page.tsx

@@ -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">
@@ -25,6 +41,7 @@ export default function HomePage() {
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
+                aria-hidden="true"
               >
                 <path
                   strokeLinecap="round"
@@ -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">
@@ -55,6 +72,7 @@ export default function HomePage() {
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
+                aria-hidden="true"
               >
                 <path
                   strokeLinecap="round"
@@ -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>
 
@@ -81,6 +115,7 @@ export default function HomePage() {
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
+                aria-hidden="true"
               >
                 <path
                   strokeLinecap="round"

apps/template-vite-react/src/routes/index.tsx

@@ -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({
@@ -40,6 +41,7 @@ function Index() {
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
+                aria-hidden="true"
               >
                 <path
                   strokeLinecap="round"
@@ -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">
@@ -70,6 +72,7 @@ function Index() {
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
+                aria-hidden="true"
               >
                 <path
                   strokeLinecap="round"
@@ -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>
 
@@ -98,6 +115,7 @@ function Index() {
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
+                aria-hidden="true"
               >
                 <path
                   strokeLinecap="round"