Supabase, Next 풀스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

React icon

설치

yarn add react-icons@^5.0.1

Supabase

설치

yarn add @supabase/supabase-js@^2.42.0
yarn add @supabase/ssr@^0.1.0

Supabase Auth ui

설치

yarn add @supabase/auth-ui-react@^0.4.7
yarn add @supabase/auth-ui-shared@^0.1.8

React spinners

설치

yarn add react-spinners@^0.13.8

React cookies

설치

yarn add cookies-next@^4.1.1

Generating TypeScript Types

설치

npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > types/supabase.ts

useCopyToClipboard

Clipboard API를 사용하여 텍스트를 클립보드에 복사하는 사용자 정의 후크입니다.

설치

yarn add usehooks-ts

Route Handlers

https://nextjs.org/docs/app/building-your-application/routing/route-handlers

구글 로그인 구현 3단계

1. Google Cloude API Oauth 세팅
2. Auth UI
3. Callback 처리 (PKCE )