Next JS Protected Routes

I'm trying to protect routes using auth-helpers however when I login, supabase.auth.user() on the client side shows I'm logged in but I have to wait a few mins before I can access protected routes.
I'm new to web dev but I think it might be something to do with the login not being processed on the server side?
Any help would be much appreciated.

b3n123OP•9/19/22, 2:42 PM

When I can finally access the protected page, the console log of the server side user includes: "This user payload is retrieved from the cached JWT and might be stale. If you need up to date user data, please call the

getUser

getUser

method in a server-side context!" - could this be the reason? Do I need to force refresh something instead of waiting a few mins?

NanoBit•9/19/22, 3:48 PM

It shouldn't be that bad. It should only take a few seconds for the cookie to appear on your browser

Bb3n123 When I can finally access the protected page, the console log of the server side...

NanoBit•9/19/22, 3:48 PM

That is just the default text in the token to say that it "might" be stale, but not necessarily is

NNanoBit It shouldn't be that bad. It should only take a few seconds for the cookie to ap...

b3n123OP•9/19/22, 3:54 PM

I thought the same but unsure if I'd done something. Is there something I can do to detect the issue/solution? It's still just a local project

NanoBit•9/19/22, 3:57 PM

You can check the network tab and see if you see the requests to

/api/auth/callback

/api/auth/callback

with your new access tokens and reply from

/api/auth/users

/api/auth/users

with the access tokens

Also see the cookies appear in ur Browser Application tab

Ps: I might spell the uri incorrectly. Don't rmb exact name

b3n123OP•9/19/22, 4:01 PM

So I'm not 100% confident in looking at network requests but I don't see anything to either of these straight after logging in. If I go to /api/auth/user - it just says null

b3n123OP•9/19/22, 4:10 PM

I have an auth token in the browser tab and I'm able to console.log the info using the client side methods, the server just doesn't seem to register me as logged in

Bb3n123 I have an auth token in the browser tab and I'm able to console.log the info usi...

NanoBit•9/19/22, 4:56 PM

To be clear, you use this right ? https://github.com/supabase/auth-helpers/blob/main/packages/nextjs/README.md

GitHub

auth-helpers/README.md at main · supabase/auth-helpers

A collection of framework specific Auth utilities for working with Supabase. - auth-helpers/README.md at main · supabase/auth-helpers

NanoBit•9/19/22, 4:56 PM

Which version of supabase are you at? As I understand, the latest version only supports v1 for now

b3n123OP•9/19/22, 4:57 PM

"@supabase/auth-helpers-nextjs": "^0.2.7",
"@supabase/auth-helpers-react": "^0.2.4",
"@supabase/supabase-js": "^1.35.3",

NNanoBit To be clear, you use this right ? https://github.com/supabase/auth-helpers/blob/...

NanoBit•9/19/22, 4:57 PM

Did you follow all the instructions on the ReadMe?

Bb3n123 "@supabase/auth-helpers-nextjs": "^0.2.7", "@supabase/auth-helpers-react": "...

NanoBit•9/19/22, 4:58 PM

yea, the versions look fine

b3n123OP•9/19/22, 4:58 PM

Yes I think I've followed the instructions but when it says "/api/auth/callback: The UserProvider forwards the session details here every time onAuthStateChange fires on the client side. This is needed to set up the cookies for your application so that SSR works seamlessly." - do I need to do something with this?

NanoBit•9/19/22, 4:59 PM

Nope, it's setup when you

NanoBit•9/19/22, 5:00 PM

and "Wrap your pages/_app.js component with the UserProvider component:"

b3n123OP•9/19/22, 5:00 PM

Cool, I thought so

b3n123OP•9/19/22, 5:00 PM

Yes I've done that too

b3n123OP•9/19/22, 5:00 PM

and I pass UserProvider the supabase client from 'import { supabaseClient } from '@supabase/auth-helpers-nextjs';'

NanoBit•9/19/22, 5:01 PM

yea, it sounds about right

NanoBit•9/19/22, 5:01 PM

Hm, is there something you might've done differently?

Try update to latest v1?

NanoBit•9/19/22, 5:02 PM

Although i think, 1.36 is latest or 1.35.6, so not much difference

NanoBit•9/19/22, 5:03 PM

Perhaps, someone can chime in if I missed sth .. (or i can check this tmr)..

b3n123OP•9/19/22, 5:03 PM

Appreciate the help because I've been looking at this for so long

b3n123OP•9/19/22, 5:04 PM

I'm confused because client side, I can sign in and out instantly. I can also sign out instantly server side (I know this because as soon as I signout I can't access protected routes) but server side sign in sometimes works but it just takes like 2/3/4 mins

b3n123OP•9/19/22, 5:06 PM

I don't know if this is a clue to the problem but I've added a redirectTo to the sign in but this has never actually forwarded me anywhere

b3n123OP•9/19/22, 5:15 PM

Just some more notes: I've signed in and can now access protected routes, I have 2 cookies: sb-access-token and sb-refresh-token

NanoBit•9/20/22, 4:51 AM

Yes, those two cookies are returned from

/api/auth/callback

/api/auth/callback

which are needed to access protected routes

NanoBit•9/20/22, 4:52 AM

Does the error still exist?

b3n123OP•9/20/22, 5:30 PM

So there is no error but these cookies just take a few minutes to come through which is too long

b3n123OP•9/20/22, 5:35 PM

Once the cookies are there then I can view the protected page too

b3n123OP•9/20/22, 5:47 PM

So if cookies are the thing needed to access protected routes (sorry for my limited knowledge here) then the delay of getting cookies on the client is the issue? That's what needs to be looked into?

Bb3n123 So if cookies are the thing needed to access protected routes (sorry for my limi...

NanoBit•9/21/22, 3:15 AM

I suppose so. Perhaps you can show your login code?

b3n123OP•9/21/22, 1:59 PM

const handleSubmit = async (event) => {
event.preventDefault()

const email = event.target.email.value;
const password = event.target.password.value;

const { user, error } = await supabase.auth.signIn({
email: email,
password: password
},
{
redirectTo: 'https://supabase.com/',
});

console.log(user)
}

b3n123OP•9/21/22, 2:00 PM

The redirect doesn't work either

garyaustin•9/21/22, 2:23 PM

There is no redirect from signIn with email and password. It just returns with the session and user variables set or not.

Bb3n123 const handleSubmit = async (event) => { event.preventDefault() const em...

NanoBit•9/21/22, 2:34 PM

As gary has said, you should update the router yourself

const { user, error } = await supabaseClient.auth.signIn({
      email,
      password,
    });

if (error) {
 // do sth
} else {
  router.push('new-route');
}

const { user, error } = await supabaseClient.auth.signIn({
      email,
      password,
    });

if (error) {
 // do sth
} else {
  router.push('new-route');
}

NanoBit•9/21/22, 2:35 PM

For even better, you should

// Add delay before redirect to allow time to receive cookies
// https://github.com/supabase/auth-helpers/issues/150#issuecomment-1171663367
      setTimeout(() => {
        router.push('new-route');
      }, 500); // adjust as needed

// Add delay before redirect to allow time to receive cookies
// https://github.com/supabase/auth-helpers/issues/150#issuecomment-1171663367
      setTimeout(() => {
        router.push('new-route');
      }, 500); // adjust as needed

You can see the link for more info

b3n123OP•9/21/22, 4:54 PM

So I've implemented that which now works for normal pages but it just doesn't direct to server side protected pages - nothing happens

b3n123OP•9/21/22, 4:54 PM

Even when I navigate to protected pages, it still asks me to sign in

b3n123OP•9/21/22, 5:30 PM

so looking in dev tools, the api request to /callback and /user was queued and started at 1.6 min, after which both only took <20ms to return - what could be the cause of the requests being queued this long?

Bb3n123 so looking in dev tools, the api request to /callback and /user was queued and s...

NanoBit•9/22/22, 1:23 AM

I'm not sure. Your setup looks fine from all the details given

NanoBit•9/22/22, 1:24 AM

You could try reproduce this in a mini repo and see if you still get this issue?

// Add delay before redirect to allow time to receive cookies // https://github.com/supabase/auth-helpers/issues/150#issuecomment-1171663367 setTimeout(() => { router.push('new-route'); }, 500); // adjust as needed

Next JS Protected Routes

Similar Threads

Similar Threads

Similar Threads