SignInWithOauth never triggers route.refresh(), Nextjs 13 app directory.

[roker15]

We need to refresh route after Google sign In, so that session is updated . As per examples given in supabase we use

const signInWithgoogle = async (redirectUrl: string) => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: redirectUrl,
      },
    });
    router.refresh();
  };

But after signing in with google i redirected to home page , but router.refresh(); is never triggered and this is causing problem and many server component is not rendered which depends upon session.

[GuysmoB]

I have an issue with the middleware but I don't know if it's related to your problem :

After using signInWithGoogle(), I use options: { redirectTo: '/dashboard'}, to redirect.

// middleware.ts : 
const sessionUrls = ['/dashboard', '/marketplace', '/network', '/ressources']; 
if (!session.data.session && sessionUrls.includes(req.nextUrl.pathname)) {
    console.log('##### Middleware redirect to home');
    url.pathname = APP_LINK.home.href;
    return NextResponse.redirect(url);
}

If the user is not authenticated and tries to access those protected routes, he is redirected to the home page '/'.
The problem is that middleware.ts is triggered after the signInWithGoogle() redirect but before the SIGNED_IN Supabase event, so the user is redirected to the home page.

[Arslan-Soomro]

I have an issue with the middleware but I don't know if it's related to your problem :

After using signInWithGoogle(), I use options: { redirectTo: '/dashboard'}, to redirect.

// middleware.ts : 
const sessionUrls = ['/dashboard', '/marketplace', '/network', '/ressources']; 
if (!session.data.session && sessionUrls.includes(req.nextUrl.pathname)) {
    console.log('##### Middleware redirect to home');
    url.pathname = APP_LINK.home.href;
    return NextResponse.redirect(url);
}

If the user is not authenticated and tries to access those protected routes, he is redirected to the home page '/'. The problem is that middleware.ts is triggered after the signInWithGoogle() redirect but before the SIGNED_IN Supabase event, so the user is redirected to the home page.

Faced the same issue, here is a solution that worked for me. It takes a bit of time until you are logged in with google, so after the redirect from selecting your account page, you should redirect (using redirectTo parameter in signInWith Auth function) to an unprotected route and then get the session, if session contains an access token then move to a protected route, that way you will wait until the SIGN_IN event has completed its job.

[pcmourya]

May I pick this issue, @Arslan-Soomro ?

[Arslan-Soomro]

May I pick this issue, @Arslan-Soomro ?

Sure. Go ahead

[edu-amr]

I have an issue with the middleware but I don't know if it's related to your problem :
After using signInWithGoogle(), I use options: { redirectTo: '/dashboard'}, to redirect.

// middleware.ts : 
const sessionUrls = ['/dashboard', '/marketplace', '/network', '/ressources']; 
if (!session.data.session && sessionUrls.includes(req.nextUrl.pathname)) {
    console.log('##### Middleware redirect to home');
    url.pathname = APP_LINK.home.href;
    return NextResponse.redirect(url);
}

If the user is not authenticated and tries to access those protected routes, he is redirected to the home page '/'. The problem is that middleware.ts is triggered after the signInWithGoogle() redirect but before the SIGNED_IN Supabase event, so the user is redirected to the home page.

Faced the same issue, here is a solution that worked for me. It takes a bit of time until you are logged in with google, so after the redirect from selecting your account page, you should redirect (using redirectTo parameter in signInWith Auth function) to an unprotected route and then get the session, if session contains an access token then move to a protected route, that way you will wait until the SIGN_IN event has completed its job.

The solution I have found at the moment is the only one available, however, we recognize that it is not ideal.

Correct me if I'm wrong...

For example, I have the following structure in Next.js:

app
-- login-page
-- logged-page
-- token-verification
middleware

After logging in, there is a waiting period until the Google token is returned. When the token arrives, I should redirect the user to the token-verification route. If the check returns true, the user will be redirected to the logged-page, otherwise to the login-page. Am I right?

[jakub-chatrny]

Facing same issue, ive managed to work around this without additional route redirects like this:
Login.tsx

"use client";
 const Login = ({user}) => {   
    const handleSignIn = () => {
        supabase.auth
            .signInWithOAuth({ provider: "google" })
            .then(() => {
                router.refresh();
            });
    };
    useEffect(() => {
        // It takes some time to retrieve session access token, so until user is ready just try get session
        if (!user) {
            setTimeout(
                () =>
                    supabase.auth.getSession().then(({ data: { session } }) => {
                        if (session?.access_token !== undefined) {
                            router.refresh();
                        }
                    }),
                100,
            );
        }
    }, [user]);
    ...
}

And in parent server component i'm loading the user:

export default async () => {
    const cookieStore = cookies();
    const supabase = createServerComponentClient({ cookies: () => cookieStore });

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

    return (
        <>
            <Login user={user} />
        </>
    );
};

It's far from ideal and there should be some timeout mechanism in useEffect, to avoid inf loop

[saltcod]

There's some new documentation on Nextjs over at
https://supabase.com/docs/guides/getting-started/quickstarts/nextjs

It would be useful to set up a clean example install to use along side your apps to see how we handle it.
npx create-next-app -e with-supabase