GPT

CORRECT USAGE WITH TANSTACK ROUTER

// src/routes/root.jsx import { createRootRouteWithContext } from '@tanstack/react-router'; import { SupabaseClient } from '@supabase/supabase-js'; interface RouterContext { supabase: SupabaseClient; } export const Ro

Prompt text

Original English text. Replace placeholders with your own details.

// src/routes/root.jsx
import { createRootRouteWithContext } from '@tanstack/react-router';
import { SupabaseClient } from '@supabase/supabase-js';

interface RouterContext {
 supabase: SupabaseClient;
}

export const Route = createRootRouteWithContext<RouterContext>()({
 component: RootComponent
});

function RootComponent() {
 const { data: session, isLoading } = useSessionQuery();
 
 if (isLoading) {
 return <div>Loading...</div>;
 }
 
 return <Outlet />;
}

// src/routes/index.jsx
import { createFileRoute } from '@tanstack/react-router';

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

function HomeComponent() {
 const { supabase } = useSupabase();
 const { data: session } = useSessionQuery();
 
 const handleSignIn = async () => {
 await supabase.auth.signInWithOAuth({
 provider: 'github'
 });
 };
 
 const handleSignOut = async () => {
 await supabase.auth.signOut();
 };
 
 return (
 <div>
 <h1>Home</h1>
 {session ? (
 <>
 <p>Welcome {session.user.email}</p>
 <button onClick={handleSignOut}>Sign Out</button>
 </>
 ) : (
 <button onClick={handleSignIn}>Sign In with GitHub</button>
 )}
 </div>
 );
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →