Weird css loading on page reload

[bearbricknik]

Hi, am wondering why this weird animation without css is happening on the /signin page as its not returning the auth without any css attached on the first page reload.

https://github.com/vercel/nextjs-subscription-payments/assets/131278641/31d8bbd5-8c7f-4100-ab10-c5d4a5cc6295

page.tsx:

import { getSession } from '@/app/supabase-server';
import AuthUI from './AuthUI';

import { redirect } from 'next/navigation';
import Logo from '@/components/icons/Logo';

export default async function SignIn() {
  const session = await getSession();

  if (session) {
    return redirect('/account');
  }

  return (
    <div className="bg-bkg flex justify-center height-screen-helper">
      <div className="flex flex-col justify-between max-w-lg p-3 m-auto w-80">
        <div className="flex justify-center pb-12">
          <Logo width="64px" height="64px"/>
        </div>
        <AuthUI />
      </div>
    </div>
  );
}

AuthUI.tsx:

'use client';

import { useSupabase } from '@/app/supabase-provider';
import { getURL } from '@/utils/helpers';
import { Auth } from '@supabase/auth-ui-react';
import { ThemeSupa } from '@supabase/auth-ui-shared';
import { useTheme } from 'next-themes'

export default function AuthUI() {
  const { resolvedTheme } = useTheme();
  const { supabase } = useSupabase();
  return (
    <div className="flex flex-col space-y-4">
      <Auth
        supabaseClient={supabase}
        providers={['google', 'apple']}
        redirectTo={`${getURL()}/auth/callback`}
        magicLink={true}
        theme={resolvedTheme === 'dark' ? 'dark' : 'default'}
        appearance={{
          theme: ThemeSupa,
          variables: {
            default: {
              colors: {
                defaultButtonBackground: 'bg-white',
                brand: '#2563eb',
                brandAccent: '#3b82f6',
              }
            }
          }
        }}
      />
    </div>
  );
}```

[bearbricknik]

Hi, just wanted to check back on it. Does someone experience this as well?

[thehamzajunaid]

Yes I am experiencing this as well. I dont know what's the reason behind it.

[ajayvignesh01]

The problem is with the AuthUI component. I think it’s still a beta feature for Supabase.

But you could try setting the page to dynamically render. Might fix the css glitch. This isn’t the best solution though. Better off creating your own login screen / page.

[bearbricknik]

The problem is with the AuthUI component. I think it’s still a beta feature for Supabase.

But you could try setting the page to dynamically render. Might fix the css glitch. This isn’t the best solution though. Better off creating your own login screen / page.

I am still in learning supabase and nextjs / react. Is there a way to use the supabase auth on a custom auth page? Havent found it

[ajayvignesh01]

The problem is with the AuthUI component. I think it’s still a beta feature for Supabase. But you could try setting the page to dynamically render. Might fix the css glitch. This isn’t the best solution though. Better off creating your own login screen / page.

I am still in learning supabase and nextjs / react. Is there a way to use the supabase auth on a custom auth page? Havent found it

You just have to create a form and implement some auth logic using supabase. Some examples in the following link: https://supabase.com/docs/guides/auth/auth-helpers/nextjs

[nate-oo]

I am having the same issue

[leerob]

https://github.com/vercel/nextjs-subscription-payments/pull/278