hey all I m setting up a nextjs app with supabase auth using Supabase #help

hey all! I'm setting up a nextjs app with supabase...

saeris

02/04/2022, 8:55 AM

hey all! I'm setting up a nextjs app with supabase auth using the discord provider. I'm running into an issue whereby my redirect URL doesn't seem to be respected, not sure what I might have missed. As you can see in the screenshot, when I get to the Discord oauth page, it lists my supabase URL as the redirect target, which doesn't appear right to me. Additionally, when clicking authorize, I get redirected to

http://localhost:3000/#

, when in my code I've set my redirect options as follows for my signIn hook:

Copy code

await signIn(
  {
      provider: `discord`
  },
  {
      redirectTo: `http://localhost:3000/dashboard`
  }
);

Any ideas?

saeris

02/04/2022, 8:57 AM

to be clear, the session does correctly get set, so I am successfully logging in via the provider, it's just the redirect functionality that I'm struggling with

saeris

02/04/2022, 9:01 AM

is there something extra I need to do with SSR in order to redirect to a protected route? I've configured my

_app

to subscribe to auth change events and update the session cookie via an auth api endpoint

adrian_h

02/04/2022, 7:27 PM

I had that issue as well. Are you doing anything else in the code base with like protected routes?

saeris

02/04/2022, 10:58 PM

nothing special, it's all just scaffolding out the boilerplate needed

saeris

02/04/2022, 11:05 PM

I've got a two pages, home and dashboard, with a shared layout between the two, and a log in/log out button in the shared header. I've set up some context hooks adapted from

react-supabase

source files, wrapped my

_app

in the context provider, and I have an

auth

api route that calls

setAuthCookie()

, which should be invoked every time

onAuthStateChange()

triggers in my

_app

saeris

02/04/2022, 11:07 PM

the dashboard route has a

getServerSideProps

function which calls

getUserByCookie

, which handles the redirect logic. I have no issue navigating to the dashboard route after I've logged in, it's just the redirect on login success that takes me to the wrong place it seems

saeris

02/04/2022, 11:08 PM

I'll double check my network requests to make sure I'm not hitting the dashboard route and bouncing back to home for not having a sessions

saeris

02/04/2022, 11:10 PM

looks like I am being bounced after logging in

saeris

02/04/2022, 11:14 PM

looks like that redirect doesn't have any cookies attached to the request, so the call to

getUserByCookie

fails

saeris

02/04/2022, 11:46 PM

the

SIGNED_IN

event doesn't fire until I get bounded from

dashboard

and redirected to the

home

route, because the call to the

auth

api isn't made until

_app

renders the page. So somewhere in the

getServerSideProps

I think I need to be handling the

SIGNED_IN

event somehow

saeris

02/04/2022, 11:46 PM

that was never covered in any of the guides I was able to find on the subject

saeris

02/04/2022, 11:53 PM

an alternative approach which works, although is a bit jank, is to skip the

redirectTo

in the signIn call and instead manually redirect using next router in

_app

when a

SIGNED_IN

event happens. The problem here is that you basically hit the

home

route first before being redirected again to

dashboard

saeris

02/05/2022, 6:58 PM

this has helped me refactor my code a bit and highlights that this appears to be an issue with Nextjs in general https://github.com/jitsucom/supabase-nextjs-middleware

saeris

02/05/2022, 7:00 PM

using middleware here to protect the routes is better option for handling the redirect logic for protected routes, but still need to get the user data for the route itself

Previous Next