bearbricknik commented 11 months ago

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.

Video: https://github.com/supabase/auth-ui/assets/131278641/1e15475d-9de3-4cf9-9dd8-f5e61d512774

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

To reproduce it: Basically just install the auth UI and its ThemeSupa and use the code. On every page reload I get this weird loading (not showing css in the first eye blink).

dvvolynkin commented 11 months ago

I have same issue. changed appearance too

auth-ui-react@0.4.6 next@13.5.5

ersinakinci commented 11 months ago

Same here. Using dynamic loading with ssr: false in Next.js as a workaround.

bearbricknik commented 11 months ago

Same here. Using dynamic loading with ssr: false in Next.js as a workaround.

How exactly you do that? Within the login page? Or within the authUI?

zaynelovecraft commented 10 months ago

Same here. Using dynamic loading with ssr: false in Next.js as a workaround.

How exactly you do that? Within the login page? Or within the authUI?

You have to use the dynamic import from next js probably where the component is being used

nmalchy commented 10 months ago

Same sort of issue except I'm using the Svelte example, I tried enabling and disabling SSR mode but same weird effect on page load, and honestly this sort of ruins everything if you want to convey to the user you're on a high-quality site..

EDIT: I actually disabled SSR mode incorrectly initially, after correctly disabling it the weird effect is no longer there, but the problem is I would like SSR mode enabled 😅

dvvolynkin commented 10 months ago

I've set CSS classes directly and it become stable