인프런 커뮤니티 질문&답변

'use client';
import React, { useEffect, useState } from 'react';
import { Auth } from '@supabase/auth-ui-react';
import { ThemeSupa } from '@supabase/auth-ui-shared';
import { createSupabaseBrowserClient } from '@/lib/client/supabase';
import useHydrate from '@/app/hooks/useHydrate';

const AuthUI = () => {
  const supabase = createSupabaseBrowserClient();
  const isMount = useHydrate();
  const [user, setUser] = useState();
  const getUserInfo = async () => {
    const result = await supabase.auth.getUser();
    console.log(result);
    if (result?.data?.user) setUser(result?.data?.user);
  };
  const handleLogout = async () => {
    supabase.auth.signOut();
    window.location.reload();
  };
  useEffect(() => {
    getUserInfo();
  }, []);
  if (!isMount) return null;

  return (
    <section className="w-full">
      <div>{user ? `로그인 됨${user?.email}` : '로그아웃'}</div>
      <>
        {user && (
          <button onClick={handleLogout} className="border-2 border-black">
            로그아웃
          </button>
        )}
      </>
      <div className="mx-auto max-w-[500px]">
        <Auth
          redirectTo={process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO}
          supabaseClient={supabase}
          appearance={{ theme: ThemeSupa }}
          onlyThirdPartyProviders
          providers={['google']}
        />
      </div>
    </section>
  );
};

export default AuthUI;

{"code":400,"error_code":"validation_failed","msg":"Unsupported provider: provider is not enabled"}

구글 로그인 시 해당 에러가 발생합니다 설정 같은 부분은 강의에 맞게 설정하였습니다