Quality-of-life improvements: fix UI jumping and add a loading spinner

[6bangs]

Before: https://github.com/mryechkin/nextjs-supabase-auth/assets/6486237/60d0549a-8837-4d65-a278-1c9c1d4afd02

After: https://github.com/mryechkin/nextjs-supabase-auth/assets/6486237/b6408a15-200f-41fc-828c-28ec9647ff9d

What do you think?

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @mryechkin on Vercel.

@mryechkin first needs to authorize it.

[6bangs]

I'm also going to add social providers. Do you think it would be valuable to have in this repo or not?

[mryechkin]

Please make your own fork for any changes. I don't intend on accepting any contributions to this repo, sorry.

[6bangs]

Ok 👍

[stevies]

Can't find any other way to contact mryechkin - but there is more going on with the content jumping and reloading than can be fixed by css changes. React is complaining about:

Warning: Cannot update a component (HotReload) while rendering a different component (Router). To locate the bad setState() call inside Router, follow the stack trace as described in https://reactjs.org/link/setstate-in-render.

I actually briefly see an on-screen message between reloads. See screenshot.

As far as I can see when I trace - everything is loading twice with page and sign-in rendering at the wrong times:

-- page got user null
-- page redicecting to /sign-in
-- page got user null
-- page redicecting to /sign-in
-- sign-in got data { session: null }
-- sign-in got data { session: null }

Can't use useEffect in the server component so not sure how to delay the redirect.

Not relevant to this defect - but no other way to contact the author. Hope you don't mind. Excellent tutorials. Thanks. But maybe a better use case / flow would be to have the home landing page unprotected, with some secured and non-secured areas. That's more representative of normal site flows. Also, it would be good to see a Magic Link example at some point.

[6bangs]

Hey @stevies. Yeah, after I submitted this I found another issue that lead to reloading/flickering and possibly also the client-side error you're seeing:

nextjs-supabase-auth/src/components/AuthProvider.js

Line 17 in a72d115

if (session?.access_token !== accessToken) {

    const {
      data: { subscription: authListener },
    } = supabase.auth.onAuthStateChange((event, session) => {
      if (session?.access_token !== accessToken) {
        router.refresh();
      }
    });

IIRC: the first time onAuthStateChange is called, session?.access_token evaluates to undefined. accessToken is null, so refresh is called unnecessarily. Future calls work as expected. The fix is to use != instead of strict inequality.

[stevies]

@6bangs That does remove the error message. Thanks. Excessive flickering still a problem for me, so will try using your other changes.

[mryechkin]

@stevies thanks for bringing this up and @6bangs for the suggested fix.

I fixed it a slightly different way, by removing line 18 in the root app/layout.js:

const accessToken = session?.access_token || null;

As you said @6bangs - there's no reason for accessToken to be null on initial load, so this addresses that problem. I've pushed this fix to the main branch, alongside some other currency updates.

As for your other suggestions @stevies - I know there are improvements that can be made, and lots of other examples added, but I want this repo to stay as close to my guides as possible - and I don't plan on updating them anytime soon. I mention this at the end of my last guide and in the contributing guide in this repo. There's a reason the issues are turned off as well.

Frankly, I was hoping that Supabase would stay with the Auth Helper pattern for at least a while, but they've added yet another new package called @supabase/ssr that's supposed to replace the Next.js Auth Helpers. I'm not rewriting my guide for the 4th time, so this repo will stay on Auth Helpers. At least this time it doesn't look to be that big of a migration, but it's still annoying that they go changing things once again, and so soon.

[stevies]

Thanks, @mryechkin - I fully understand. Your tutorial has give me a much better understanding of the process and an excellent start point for my own app.

[6bangs]

@mryechkin agreed, and ssr isn't really ready yet. I tried migrating to it without any metadata, etc, and ran into this: supabase/auth-helpers#643

Hopefully it'll reach stability soon 😅