Supabase로 로그인 구현하기 with NextJS 1편

 

안녕하세요?

 

최근 NextJS로 여러가지 로그인 구현 웹앱을 만들려고 노력하고 있는데요.

 

최근에는 NextAuth와 Prisma를 이용해서 카카오 로그인, 네이버 로그인, 구글 로그인 등 다방면으로 구현해 봤습니다.

 

근데 본격적인 웹앱 개발을 하려면 DB에 대한 서버 문제가 걸리는데요.

 

이에 대한 해결책으로는 Firebase 를 쓰는 방법이 있습니다.

 

웹 관련 애플리케이션 제작에 있어 모든 기능을 제공해 주는 Firebase인데요.

 

구글이 인수해서 키우고 있는 토탈 서비스인데요.

 

오늘은 Firebase 말고 이에 대항해서 새로 나온 서비스인 Supabase를 이용해서 로그인을 구현해 볼까 합니다.

 

https://supabase.com/

The Open Source Firebase Alternative | Supabase

 

Supabase는 free tier를 제공해 주는데요.

 

넉넉한 DB 용량과 트래픽으로 웬만하면 요금이 청구 될 수 없습니다.

 

그래서 취미로 개발하시는 분들한테는 최적의 서비스죠.

 

그리고 DB 스토리지 및 서버가 한국, 서울에도 있어서 속도면에서도 아주 빠릅니다.

 

가입은 Github 아이디로 하시면 되구요.

 

가입하셨으면 일단 프로젝트를 만들어야 겠죠.

 

아래 스크린샷 처럼 New Project를 눌러 자신만의 프로젝트를 만듭시다.

 

 

이름과 Database Password는 적당히 넣어주시구요.

 

꼭 Region(지역)은 서울로 지정해 주면 좋습니다.

 

일단 프로젝트를 만들었으면 제일 중요한 화면이 나옵니다.

 

코딩할때 Supabase 서비스에 엑세스할 수 있는 API 키와 ServerKey URL을 알려주는데요.

 

위 그림에서 빨간색 동그라미 친 곳이 그것입니다.

 

 

Supabse 화면 오른쪽 맨 아래 Settings 버튼을 눌러 API 링크를 누르셔도 똑같은 화면이 나오니까 걱정하시 않으셔도 됩니다.

 

자 그럼, 본격적인 코딩에 들어가 볼까요?

 

저는 NextJS와 TailwindCSS를 이용할 예정입니다.

 

당연히 Typescript도 적용할 예정이구요.

 

npx create-next-app supa-auth -e with-tailwindcss

 

위 명령어를 실행하시면 NextJS 템플릿에 TailwindCSS가 적용된 상태로 supa-auth 란 폴더가 생성될 겁니다.

 

그리고 Typescript를 적용해야 겠죠.

 

cd supa-auth

touch tsconfig.json

npm i -D typescript @types/node @types/react

touch 는 빈화일을 만드는 터미널 명령어인데요.

 

윈도우즈 사용자라면 아마 이런 명령어가 없을 겁니다.

 

그냥 VS Code 에디터에서 supa-base 폴더에 tsconfig.json 이란 이름으로 빈 파일을 만들어 두시면 됩니다.

 

그리고 두번째 Typescript 관련 패키지를 실행하시구요.

 

다 되셨으면, 다음과 같이 개발 서버를 돌려봅시다.

 

npm run dev

 

개발 서버를 돌리는 것 만으로 NextJS는 Typescript가 설치되어 있다는 걸 알아채고 위와 같이 tsconfig.json 파일의 내용을 알아서 채워줍니다.

 

이로써 개발을 위한 NextJS + TypeScript + TailwindCSS 템플릿이 설치가 완료되었습니다.

 

이제 Supabase를 이용한 서비스 개발의 첫번째 단계인 supabase 접속 루틴을 만들어 보겠습니다.

 

먼저 supabse의 자바스크립트 클라이언트를 설치해야겠죠.

 

npm i -D @supabase/supabase-js

 

이제 우리의 supa-auth 프로젝트 상단에 .env.local 이라는 NextJS 환경설정 파일을 만듭시다.

 

이 파일은 github에 커밋되지 않게 .gitignore에 .env.local 파일이 있는지 한번더 체크하시기 바랍니다.

 

NEXT_PUBLIC_SUPABASE_URL=https://<project-name>.supabase.co
NEXT_PUBLIC_SUPABASE_KEY=<project-access-key-from-supabase>

 

여기에는 아까 Supabe의 API 링크에서 복사해서 붙혀넣기 하시면 됩니다.

 

이제 코드를 만들어 볼까요?

 

supa-auth이란 폴더에 lib 이란 폴더를 만듭시다.

 

그리고 lib 폴더에서 그 밑에 supabase 란 폴더를 또 만들구요.

 

그리고 supabase란 폴더에 supabase.ts란 파일을 만듭시다.

 

/lib/supabase/supabase.ts

import { createClient, SupabaseClient } from '@supabase/supabase-js';

const supabaseUrl: string = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
const supabaseServerKey: string = process.env.NEXT_PUBLIC_SUPABASE_KEY || '';

const supabase = createClient(supabaseUrl, supabaseServerKey);

// Export for usage by the rest of the app
export { supabase }

 

위 코드는 supabase Document에서 제공하는 파일입니다.

 

그리고 우리가 export를 default 방식이 아닌 개별 개체를 export 했기 때문에 /lib/supabase 폴더에 index.ts란 파일을 만듭시다.

 

/lib/supabase/index.ts

export * from './supabase';

이렇게 만들었으면 이제 우리는 NextJS 코드에서 다음과 같이 하면 supabase 클라이언트를 불러올 수 있습니다.

 

import { supabase } from '~/lib/supabase'

 

자 이제 supabase를 이용한 NextJS 코딩 준비가 마무리 되었습니다.

 

다음 시간에는 본격적인 로그인 로그아웃 구현에 들어가 보도록 하겠습니다.