supabase로 로그인, 회원가입 구현하기

 

우선 supabase 가입 후 프로젝트를 생성한다.

 

https://supabase.com/dashboard/projects

Dashboard | Supabase

 

 

 

 

프로젝트명을 기입하고 Generate a password를 클릭하면 비밀번호를 생성해준다

꼭 복사해서 저장해둘것!

 

그리고 프로젝트에 돌아와서 src폴더 안에 supabase 폴더를 만들고, 그 안에 supabaseClient.js 파일을 생성한다.  그리고 파일 최상단 위치에 .env.local 파일을 생성한다.

 

 

그리고 파일 안에 코드를 삽입한다.

 

.env.local 파일 안에는

 

anon Api Key 와, URL을 복사해서 붙여넣는다.

 

그럼 이제 supabase와 내 프로젝트가 연결되었다 ! 이제 시작!!

 

우선 회원가입 코드부터 짜보자ㅏ!

 

 

https://supabase.com/docs/reference

Supabase Docs

 

 

공식문서의 Create a new user 부분을 참고하여 코드를 생성하면

const handleSignUpClick = async () => {
    const { data, error } = await supabase.auth.signUp({
      email: email,
      password: password,
      nickname: nickname,
    });
    if (error) {
      throw error;
    }

 

 

Athentication에 내가 기입한 정보가 들어간다 그러나 저 주황색 경고문..? 

 

 

Athentication > Providers에서 Email 의 Comfirm email 을 체크해제 해줘야 한다

 

그럼 회원가입이 기능은 구현이 된 것이다!!

 

 

 

이제 로그인을 도전해보자ㅏ!!

 

 

 

 

역시나 공식문서에 Sign in a user 부분의 코드를 참고하여 코드를 짰당

 

 const handleLogInClick = async () => {
    const { data, error } = await supabase.auth.signInWithPassword({
      email: email,
      password: password,
    });
    if (error) {
      throw error;
    }
    console.log(data);
  };

 

믿기지 않겠지만 이렇게 하면 회원가입, 로그인은 다 구현이 되었다.

 

하지만 우린 이 user 정보를 이용해야 하므로 데이터를 table 에 넣어보도록 하자

그 전에!  아무나 DB데이터를 삽입,수정,삭제를 하면 안되기 때문에

policy를 설정해주어야 한다.

 

우리는 우선 삽입부분만 설정을 해주자

여기 Auth policy를 클릭하고

Create Policy 클릭

 

 

사진상 네번째에 있는 INSERT를 클릭하고

user_id 부분을 테이블에 본인이 설정한 id명으로 바꿔준다

저는 id 로 설정해서 id로 바꿔주었다. 

후에 Save policy를 클릭해주면 끄읏.!

 

그럼 바로 테이블을 생성해주쟈ㅑ

 

우선 Table Editor에서 

 

Create a new table 을 클릭하여 table 을 생성한다.

 

 

테이블 이름과 Cloumns을 타입에 맞게 생성해준다.

나는 닉네임도 받아야 하니 닉네임도 추가해줬다.

참고로 여기서의 id는 우리가 입력받는 id가 아님! 

입력받는 아이디 부분은 email 임을 주의하자

 

그러면 테이블이 생성됐을 것이고

이제 그 테이블에 정보를 삽입하는 코드를 짜보자.

 

 

 

역시나 공식문서에 있는 코드를 참고하여 

 

const { data: user } = await supabase.from("users").insert({
      id: data.user.id,
      created_at: data.user.created_at,
      email: data.user.email,
      nickname: nickname,
    });

 

테이블에  삽입했던 컬럼들을 모두 넣어주면 아주 간단한 코드로 테이블에 들어가는 것을 확인할 수 있다.

 

 

이렇게 하면 회원가입, 로그인 , 테이블에 유저 정보 넣기까지 끝!!

 

 

 

 

 

supabase를 마스터한다면 프론트 개발자임에도 불구하고 DB까지 편하게 관리하고 불러올 수 있음이 가능함!!