TODO

• [x] 회원가입 구현
  • [x] 인증링크 (Confirmation URL) 활용한 회원가입 구현

https://github.com/lopun-lecture/inflearn-supabase-instagram-clone/commit/5dcc45acf10349a446bd1d444013ebec41968430

Confirmation URL 방식

Password-based Auth | Supabase Docs

• Web Client → Supabase로 회원가입 요청

• Supabase에서 회원가입 처리 + 인증 링크가 담긴 이메일 전송

  • {.ConfirmationUrl} 템플릿 활용

    

• 유저는 이메일로 전송된 인증 링크를 클릭

  • 인증 링크 = https://***.supabase.co/auth/v1/verify?token={tokenHash}&redirect_to=http://localhost:3000/
  • supabase 서버에서 본인 인증을 마치고 redirect_to에 적힌 링크로 돌아온다. 이 때 code라는 searchParam을 전송
  • http://localhost:3000/?code=1234-1234-1234-1234

• Web Client에서는 전송받은 code값을 활용해서 로그인 세션을 획득

  • supabase.auth.exchangeCodeForSession(code)

• 로그인까지 자동으로 완료

config/auth-provider.tsx

"use client";

import { usePathname, useRouter } from "next/navigation";
import { useEffect } from "react";
import { createBrowserSupabaseClient } from "utils/supabase/client";

export default function AuthProvider({ accessToken, children }) {
  const supabase = createBrowserSupabaseClient();
  const router = useRouter();

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

    return () => {
      authListner.unsubscribe();
    };
  }, [accessToken, supabase, router]);

  return children;
}

app/signup/confirm/route.ts