Next.js Discord

Discord Forum

Weird loading without CSS attached

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Hi, I am currently just testing a few things and I came across this repo https://github.com/vercel/nextjs-subscription-payments.

However, I am wondering why this weird animation without css is happening on the /signin page as its not returning the auth without any css attached.
Answered by fuma
Surely this problem also exists in their official example, you could open an issue in their repo
https://subscription-payments.vercel.app/signin

I am using Auth UI in a side project using Pages Router, it worked seamlessly. I’ve just checked their docs, seems they didn’t mention much about Auth UI for App Router, their quick-start guide only told you to build your own login UI. As a workaround, you may migrate to Pages Router or start by building your own UI
View full answer

4 Replies

Asiatic LionOP
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>
  );
}
Asiatic LionOP
Bump
fuma
Surely this problem also exists in their official example, you could open an issue in their repo
https://subscription-payments.vercel.app/signin

I am using Auth UI in a side project using Pages Router, it worked seamlessly. I’ve just checked their docs, seems they didn’t mention much about Auth UI for App Router, their quick-start guide only told you to build your own login UI. As a workaround, you may migrate to Pages Router or start by building your own UI
Answer