Supabase•3y ago

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.

23 Replies

b3n123OP•3y ago

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 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•3y ago

It shouldn't be that bad. It should only take a few seconds for the cookie to appear on your browser That is just the default text in the token to say that it "might" be stale, but not necessarily is

b3n123OP•3y ago

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•3y ago

You can check the network tab and see if you see the requests to /api/auth/callback with your new access tokens and reply from /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•3y ago

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 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

NanoBit•3y ago

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•3y ago

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

b3n123OP•3y ago

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

NanoBit•3y ago

Did you follow all the instructions on the ReadMe? yea, the versions look fine

b3n123OP•3y ago

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•3y ago

Nope, it's setup when you

NanoBit•3y ago

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

b3n123OP•3y ago

Cool, I thought so Yes I've done that too and I pass UserProvider the supabase client from 'import { supabaseClient } from '@supabase/auth-helpers-nextjs';'

NanoBit•3y ago

yea, it sounds about right Hm, is there something you might've done differently? Try update to latest v1? Although i think, 1.36 is latest or 1.35.6, so not much difference Perhaps, someone can chime in if I missed sth .. (or i can check this tmr)..

b3n123OP•3y ago

Appreciate the help because I've been looking at this for so long 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 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 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•3y ago

Yes, those two cookies are returned from /api/auth/callback which are needed to access protected routes Does the error still exist?

b3n123OP•3y ago

So there is no error but these cookies just take a few minutes to come through which is too long Once the cookies are there then I can view the protected page too 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?

NanoBit•3y ago

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

b3n123OP•3y ago

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) } The redirect doesn't work either

garyaustin•3y ago

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

NanoBit•3y ago

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');
}

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•3y ago

So I've implemented that which now works for normal pages but it just doesn't direct to server side protected pages - nothing happens Even when I navigate to protected pages, it still asks me to sign in 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?

NanoBit•3y ago

I'm not sure. Your setup looks fine from all the details given You could try reproduce this in a mini repo and see if you still get this issue?

Gaming

Programming

Next JS Protected Routes

Did you find this page helpful?