Auth and redirecting

[joshiain]

I'm looking to redirect users from all pages to the login page unless they are already signed in. I've built a ProtectedRoute component that checks if there is a user logged in and whether the path is protected, and will router.push to /login accordingly.

The issue im having is that after await supabase.signIn() is called, I’m being sent back to my login page. What I think is happening is that after signin I'm redirected to my homepage, but after the redirect supabase.auth.user() is still null, and my ProtectedRoute component is then redirecting back to /login because of this. If I enter the url to go to the home (or other) page again, it won’t redirect me back to login, user is no longer null and they are signed in.

In other posts I saw onAuthStateChange suggested to be used. But I am already using an AuthProvider similar to the examples that utilise onAuthStateChange. I think in my case it may be that the change in path is triggering a redirect before the user state is changed (also perhaps before the cookie is set?). But I'm not sure how to fix this.

I see in a few examples people redirect with getServerSideProps. But if I did this, all of my pages would go from client side rendering to SSR, and I’m not sure if that would benefit me since I'm not interested in SEO. Although I’m not a fan of the loading page flash that occurs when a protected route is being client side redirected to the login page.

[IbrahimSam96]

This is a legitimate issue that takes away from the beauty of SSR authentication. I also came across this issue and it took a part of my soul.

[marc-on-github]

Has anyone found a good solution?

[lsrugo]

I have the same issue

[silentworks]

You can fix this by storing the logged-in state into localstorage or checking against the supabase entry in localstorage. I've done this in a svelte app and it works really well.

[lsrugo]

How would you handle magic links? When the user clicks a magic link the supabase library has to set the cookie after the page is loaded

[silentworks]

I'm not a react dev so couldn't advice you on this, but there are examples around of people using Next.js and being able to accomplish this, just do a search and you will find examples.

[slamethendry]

A couple of readings that helped me:

• https://supabase.io/docs/guides/with-react - uses supabase session and works with magic link and other auth providers
• https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications - not supabase-specific but have router example

[Johann01]

I am wondering how you would do that if you sign in with a provider, because then you use the redirectTo property to redirect to a protected route but you are redirected faster then the local storage is set and you can't verify if the user is logged in or not.

Or do I overlook something?

[slamethendry]

I used the supabase client and its session handling takes care of it.

I followed the supabase guide to start with email / magic link auth. This is a lightly modified version of the App() in https://supabase.io/docs/guides/with-react.

function App() {

  const [session, setSession] = useState(null)

  useEffect(() => {
    setSession(supabase.auth.session())

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })
  }, [])

  if (!session) {
    return <Auth />
  }

  return (
    <div>
      <BrowserRouter>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/account">Account</Link>
            </li>
            <li>
              <Link to="/signout">Sign Out</Link>
            </li>
          </ul>
        </nav>
        <hr />
        <Switch>
          <Route path='/signout' >
            <SignOut session={session} />
          </Route>
          <Route path="/account">
            <Account session={session} />
          </Route>
          <Route path="/">
            <Home session={session} />
          </Route>
        </Switch>
      </BrowserRouter>
    </div >
  )
}

export default App;

function Home({ session }) {
  return (
    <div>
      <h2>Home</h2>
    </div>
  )
}

function SignOut() {
  supabase.auth.signOut()
  return <Redirect to='/' />
}

The <Account /> and <Auth /> follow the supabase doc and then I added another button for Discord sign in following https://supabase.io/docs/guides/auth/auth-discord.

async function signInWithDiscord() {
  const { user, session, error } = await supabase.auth.signIn({
    provider: 'discord'
  });
}

[zakaria-chahboun]

I did this solution

	// Signup using Google
	async function signUpWithGoogle() {
		const { error } = await supabase.auth.signIn(
			{
				provider: 'google'
			},
			{ redirectTo: 'http://localhost:3000/provider?refresh=true' }
		);
		if (error) {
			alert(error.message);
		}
	}

Like you saw in the above code, I have used a custom redirection redirectTo to my route calling provider with a query refresh=true.

The route is just for getting the session from the client side with supabase.auth.session() and give it to the server side, Then redirect again to the home page:

I use SvelteKit - But the most important thing is the concept.

<!-- this is my route provider.svelte -->
<script>
	/*
    This route is just for singup/login with providers
    to set the session-cookie for the server
    just a redirect route :)
    */
	import { supabase } from '$private/supabase';
	import { page } from '$app/stores';
	import { setAuthCookie } from '$lib/utils/session';
	import { onMount } from 'svelte';

	onMount(async () => {
		setTimeout(async () => {
			// Check the query: refresh
			if ($page.query.get('refresh') == 'true') {
				// get the session from client side
				const _session = supabase.auth.session();
				// send it to server side
				await setAuthCookie(_session);
			}
			// redirect to the home page anyway
			window.location.replace('/');
		}, 2000);
	});
</script>

[Claudio-Olivera]

I literally went through the whole internet for this answer, thank you so much.

[thomasbottonari]

Same here! Going to give this a shot.

[zakaria-chahboun]

The actuality solution is to use the signInWithPopup() window like firebase did. i already suggested that here #3492

[salahcgp]

I am trying supabase auth with svelte and found something is not just right. I follow the magic link and receive session key but link arrives at localhost:3000/#
so, i have to manually refresh once again to get the user details. I dont' understand how do you manage the setAuthCookie in the session. do you have any sample repo that you can share?

[nmerchant]

I am encountering the same issue here. When signInWithOAuth completes it's redirectTo, I do not have a user session yet and I have to manually refresh the page - once I do, I get the user's session just fine.

[Jpaulsisson]

I'm a NEWB so don't let me tell you how to do it, but I set up this

  export const authStateChangeListener = () => {
    const response = supabase.auth.onAuthStateChange((event, session) => {
      console.log(event, session);
    });
    return response;
    }    

along with a useEffect in a UserContext.js to update the state in context on every AuthStateChange and it SEEMS to be working really well.

[madebyisaacr]

Any update on this?

In my server-side code (+layout.server.ts in SvelteKit), I'm calling await getServerSession(event), but it returns null when used right after being redirected from the auth provider. It works properly after reloading the page, which leads me to believe that the problem is that getServerSession() is being called before Supabase updates the database that stores the sessions.

[madebyisaacr]

I decided to redirect on the client side instead. I moved the redirect code from +layout.server.ts to +layout.ts and set window.location.href in the onMount function to redirect. This works fine because in my experience, session is never null on the client side when a user is logged in.

[silentworks]

You need an intermediary page before going to a server side protected route, this is because of how the implicit grant flow works where it uses a url fragment to send over the access_token. You can take a look at my waiting list project https://github.com/silentworks/waiting-list or even the reset-flow project https://github.com/silentworks/reset-flow as it's the same concept. The diagram in the reset-flow project explains what need to happen quite well, it would be the same for OAuth logins too.

[mhkeller]

@silentworks that reset-flow project doesn't seem to exist anymore. Is waiting-list the best example?

[silentworks]

@mhkeller the reset flow project has been added to a larger project called supabase-by-example which has some other flows outlined too. https://github.com/supabase-community/supabase-by-example

[ummahusla]

So what is the best up-to-date solution?

I'm asking because I'm experiencing a weird issue.

I have supabase auth and auth UI with discord as the provider. I worked on my app locally on port 3000. Everything is smooth. Both email/pass and discord auth flows. When deployed to production, desktop Chrome version discord auth flow works fine, yet on mobile, after I use the sign-in with discord after successful discord login, it sends me to localhost:3000, which ruins the complete auth flow experience.

[pablosr11]

On this one, make sure in Authentication > URL configuration to specify the urls you expect to land after login as "Redirect URLs". You will need to add both the PROD and local dev ones (i.e http://localhost:3000/ and https://prod.com/)

[ummahusla]

When I finished writing it, I realised I could do it. Anyway, thanks for the help.

[MentalGear]

I had the same issue following the official sveltekit guide. The login wouldn't, at least on chrome/firefox, redirect after login.

Sveltekit Solution

Fixed this by checking for $: data.session and reloading by invalidating the page (reruns page load functions) on clientside +page.svelte.

    $: {
        // IMPORTANT: detect login was successful
        // supabase sveltekit auth ui does not work otherwise
        const hasSession = data?.session
        if (hasSession) {
            console.log('hasSession')
            // reruns all associated page load functions
            // which will redirect to the correct path
            invalidateAll()
        }
    }

[hanklikesmatcha]

Hi all,

Do we have a workaround here? I followed the tutorial and make sure data.url returns localhost:3001, but it still redirects me to production after deployment and has the site URL in Auth setting on Supabase. How to do development when login always takes me to the production URL. If I switch to thrid party providers for Auth, would that help?

	<Auth
		supabaseClient={data.supabase}
		appearance={{ theme: ThemeSupa }}
		view="magic_link"
		redirectTo={`${data.url}/logging-in?redirect=/`}
		showLinks={false}
	/>

Thanks for reading this!

[joaoguidev]

Any solution for this?
I'm having the same problem using Remix.

[acomms]

Found a solution that works with NextJs Pages directory. Shout out to zakaria-chahboun for the solution up earlier in the thread. I've adapted that solution for NextJS below.

When signing in with an OAuth provider, redirect to a route client side where you can refresh the session ("provider.tsx"), then redirect user to desired route ("/admin") in this case.

The downside to this method is the user will see a flash for the route that does the redirecting. Wish there was a reliable way to do this in middleware.

// OAuth signin method on your login component
const signInWithGoogle = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: "http://localhost:3000/auth/provider?refresh=true",
      },
    });
    if (error) alert(error.message);
  };

// -- provider.tsx route file---

import { useEffect } from "react";
import { useRouter } from "next/router";
import { useToast } from "@/components/ui/use-toast";
import { useSessionContext } from "@supabase/auth-helpers-react";

export default function ProviderRedirect() {
  const router = useRouter();
  const { refresh } = router.query;
  const { session, isLoading, supabaseClient, error } = useSessionContext();
  const { toast } = useToast();

  useEffect(() => {
    if (error) {
      toast({
        description: error.message || "Error with authentication",
        variant: "destructive",
      });
    }
    if (refresh === "true" && session) {
      // retrieve the session
      async () => {
        await supabaseClient.auth.getSession();
      };
    }
    if (!isLoading) {
      // redirect to the admin page
      void router.push("/admin");
    }
  }, [router, session, isLoading, supabaseClient, error, refresh, toast]);
}

[megafinz]

Context: NextJS 13 with Pages Router.

Hey guys, I was struggling with session not being available directly after the redirect as well, but then I noticed that supabase passes code query param in the redirect URL, so I managed to come up with a solution. I'm not sure if it's the right way to do it, but:

1. Make sure you have an API handler for code exchange route. Here's mine for example:

import { NextApiHandler } from 'next'
import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'

const handler: NextApiHandler = async (req, res) => {
  const { code } = req.query
  if (code) {
    const supabase = createPagesServerClient({ req, res })
    try {
      await supabase.auth.exchangeCodeForSession(String(code))
      res.redirect('/dashboard')
    } catch (e) {
      console.error('Failed to exchange code for session:', e)
      res.redirect('/')
    }
  } else {
    res.redirect('/')
  }
}

export default handler

2. Target your redirectTo param to this handler (make sure you added the redirect URL in the auth settings of your project in Supabase first). Here's my example (using Supabase Auth UI):

<Auth
  supabaseClient={supabaseClient}
  onlyThirdPartyProviders={true}
  providers={['github']}
  redirectTo={`${window.location.origin}/api/auth/callback`}
  appearance={{ theme: ThemeSupa }}
/>

3. Profit.

I wish this was explained a little better in the documentation. My understanding is that by default React / NextJS setup uses PKCE flow that gives you the Auth Code that is supposed to be exchanged for a session. What is confusing is that even if you don't do exactly that, it seems that Supabase's React helpers manage to do the same job asynchronously in the background, so that's why solution with some kind of a "loader" page that just waits until session becomes available and then does the redirect also works.

Hope this helps.

[alxvallejo]

Can you show what you are doing at /api/auth/callback to handle the OAuth session response?

[SbstnErhrdt]

For me it says: auth code and code verifier should be non-empty. The auth code is set.
Where do I set the code verifier and what is a code verifier?

[rmourey26]

Context - App Router NextJS 14 - Using magic-link and PKCE with easy provider drop ins. Be sure you have all URLs added to Supabase URL config. Hope this helps!

--./supabase-provider.tsx

'use client'

import { createContext, useContext, useEffect, useState } from 'react'
import { Session, SupabaseClient, createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { useRouter } from 'next/navigation'
import { Database } from '@/lib/supabase'

type MaybeSession = Session | null

type SupabaseContext = {
  supabase: SupabaseClient<any, string>
  session: MaybeSession
}

const Context = createContext<SupabaseContext | undefined>(undefined)

export default function SupabaseProvider({
  children,
  session,
}: {
  children: React.ReactNode
  session: MaybeSession
}) {
  const supabase = createClientComponentClient<Database>()
  const router = useRouter()

  useEffect(() => {
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_, _session) => {
      if (_session?.access_token !== session?.access_token) {
        router.refresh()
      }
    })

    return () => {
      subscription.unsubscribe()
    }
  }, [router, supabase, session])

  return (
    <Context.Provider value={{ supabase, session }}>
      <>{children}</>
    </Context.Provider>
  )
}

export const useSupabase = <
  Database = any,
  SchemaName extends string & keyof Database = 'public' extends keyof Database
    ? 'public'
    : string & keyof Database
>() => {
  let context = useContext(Context)

  if (context === undefined) {
    throw new Error('useSupabase must be used inside SupabaseProvider')
  }

  return context.supabase as SupabaseClient<Database, SchemaName>
}

export const useSession = () => {
  let context = useContext(Context)

  if (context === undefined) {
    throw new Error('useSession must be used inside SupabaseProvider')
  }

  return context.session
}

-- ./Middleware.tsx

`import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'

import type { NextRequest } from 'next/server'
import type { Database } from "@/lib/supabase"

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()

  // Create a Supabase client configured to use cookies
  const supabase = createMiddlewareClient<Database>({ req, res })

  const {
    data: { user },
  } = await supabase.auth.getUser()

  // if user is signed in and the current path is / redirect the user to /account
  if (user && req.nextUrl.pathname === '/') {
    return NextResponse.redirect(new URL('/programs', req.url))
  }

  // if user is not signed in and the current path is not / redirect the user to /
  if (!user && req.nextUrl.pathname !== '/') {
    return NextResponse.redirect(new URL('/login', req.url))
  }

  return res
}

export const config = {
  matcher: ['/', '/programs'],
}

-- ./callback/route.tsx

import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { NextRequest, NextResponse } from 'next/server'

export async function GET(req: NextRequest) {
  const cookieStore = cookies()
  const supabase = createRouteHandlerClient({ cookies: () => cookieStore })
  const { searchParams } = new URL(req.url)
  const code = searchParams.get('code')

  if (code) {
    await supabase.auth.exchangeCodeForSession(code)
  }

  return NextResponse.redirect(new URL('/programs', req.url))
}

--@/lib/supabase.ts
Supabase generated types

--types.tsx - Auth specific types

import { SupabaseClient } from '@supabase/supabase-js';
import { Database } from '@/lib/supabase';

export type AppSupabaseClient = SupabaseClient<Database>;
export type Table<T extends keyof Database['public']['Tables']> =
  Database['public']['Tables'][T]['Row'];
/** One of the providers supported by GoTrue. */
export type AuthProvider =
  | 'apple'
  | 'azure'
  | 'bitbucket'
  | 'discord'
  | 'facebook'
  | 'github'
  | 'gitlab'
  | 'google'
  | 'keycloak'
  | 'linkedin'
  | 'notion'
  | 'slack'
  | 'spotify'
  | 'twitch'
  | 'twitter'
  | 'workos';

--./auth-form.tsx -- replace Supa Theme with a tailwind theme

'use client'
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { Database } from '@/lib/supabase'
import { tailwindConfig } from '@/components/utils/utils'

export default function AuthForm() {
  const supabase = createClientComponentClient<Database>()
  return (
    <Auth
      supabaseClient={supabase}
      view="magic_link"
      appearance={{ theme: tailwindConfig.theme}}
      theme="light"
      showLinks={false}
      providers={[]}
      redirectTo="https://supreme-happiness-69j575q9gv4h44q5-3001.app.github.dev/callback"
    />
  )
}

[alxvallejo]

Can you format your code?

[rmourey26]

Fixed. Not sure what happened there.

[simonh1000]

Does anyone have a SvelteKit 2 solution to this?
I might skip ssr altogether if that would make it easier?

[coppinger]

Context: SvelteKit & Supabase, using the Supabase Auth UI components

Issue: as referenced a few times in this discussion, the <Auth ... > component would redirect but require a refresh to update the session data on the client side

After wrestling with this for a couple of hours, this solution works well:

Check out this guide in the Supabase docs and implement the 'src/routes/auth/callback/+server.ts' as described, then set your Auth redirect like so:

<Auth redirect={'[path]/callback/auth'} ... >

... and it should work.

[solorogue]

he came, he cooked, he conquered

[srahimeen]

Does anyone have a solution for Vite React apps? I'm using Supabase with Google OAuth as:

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { supabase } from "@/lib/supabaseClient";

async function signInWithGoogle(): Promise<void> {
  await supabase.auth.signInWithOAuth({
    provider: "google",
  });
}

export const useGoogleOAuth = () => {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: () => signInWithGoogle(),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["signInWithGoogle"] });
    },
    onError: (error) => {
      console.error(error);
    },
  });

  return mutation;
};

And after successful authentication, I want the user to be directed to the "/dashboard" route and not the "/" route. Howerver it seems the user always ends up in the /# route after finishing logging in.

I also have a Context where I keep track of the auth state and listen to onAuthStateChange.

import { createContext, useContext, useEffect, useState } from "react";
import { supabase } from "@/lib/supabaseClient";
import { ReactNode } from "react";
import { Session, User } from "@supabase/supabase-js";

export interface AuthContextType {
  isAuthenticated: boolean;
  session: Session | null | undefined;
  user: User | null | undefined;
  signOut: () => Promise<void>;
}

const AuthContext = createContext<AuthContextType>({
  isAuthenticated: false,
  session: null,
  user: null,
  signOut: async () => {},
});

interface ProviderProps {
  children: ReactNode;
}

const AuthProvider = ({ children }: ProviderProps) => {
  const [user, setUser] = useState<User>();
  const [session, setSession] = useState<Session | null>();
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);

  useEffect(() => {
    const setData = async () => {
      const {
        data: { session },
        error,
      } = await supabase.auth.getSession();

      if (error) {
        throw error;
      }

      setSession(session);
      setUser(session?.user);
      setIsAuthenticated(session !== null);
    };

    const { data: listener } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setSession(session);
        setUser(session?.user);
        setIsAuthenticated(session !== null);
      },
    );

    setData();

    return () => {
      listener.subscription.unsubscribe();
    };
  }, []);

  const signOut = async () => {
    await supabase.auth.signOut();
    // TODO redirect user to / route
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, session, user, signOut }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

export default AuthProvider;

But not sure how to make sure logged in users always end up at "/dashboard" and logged out users always end up at "/" home page.

[johannespn]

I'm also fighting with this since a while.. how is there still no good, official solution for react / next?

[Swiftyos]

I've just come across this for redirecting a logged in user away from an admin page back to their home page.

Can't find anywhere how to solve it