초기 셋팅
프로젝트 생성
프로젝트를 생성하게 되면 Project URL 과 API Key 를 얻게 된다.
코드 적용
supabase 메서드를 사용하기 위해서는 react 생성 후 supabase 패키지를 받아야한다.
npm install @supabase/supabase-js 이제 프로젝트를 생성하며 받게 된 Project URL 과 API Key를 코드에 넣어주자.
supabaseClient.js 파일 생성 후 아래와 같이 입력해주면 된다.
이렇게 하면 초기 셋팅이 끝나게 된다.
이제 우리는 export 해준 supabase 를 통해 메서드를 사용할 수 있다.
회원가입
Authentication에 유저 추가
위의 링크를 통해 들어가게 되면 이메일, 비밀번호, 전화번호 등을 통해 회원가입을 하는 방법이 나와있다.
아래와 같이 예시와 똑같은 코드를 회원가입 페이지를 만들어 작동시키면 작동이 되게 된다.
const signupFunction = async () => {
const { data, error } = await supabase.auth.signUp({
email: emailRef.current.value,
password: passwordRef.current.value,
});
}하지만 Authentication 에 들어가게 되면
Last Sign in 에 Waiting for verification.. 이라고 뜨면 회원가입이 완료되지 않은 모습이 보이는데 이는 이메일 인증이 기본 값으로 들어가 있어서 그렇다.
작성한 이메일에 들어 가보면
이러한 이메일이 와 있는 것을 확인할 수 있다.
하지만 이런 이메일은 supabase 측에서 하루 세 번 정도만 제공이 되기 때문에 일정 횟수 이상부터 에러가 발생하게 된다.
따라서 아래의 이미지와 같이 Authentication → Providers → Confirm email 을 false 처리해주고 저장해주면 된다.
이제 다시 회원가입을 진행해보면 정상적으로 회원가입이 되는 것을 볼 수 있다.
Table Editor 에 회원정보 추가
회원가입은 되었으나 우리는 우리의 table에 유저정보를 저장해주고 싶다.
Table 생성해주기
Table Editor에 들어가 user_table을 만들어주자.
회원가입 시 받아올 email, nickname그리고 authentication의 uid를 받아올 id column을 생성해준다.
정책 설정
생성이 되었다면 위 사진의 오른쪽 Add RLS Policy 버튼을 클릭해보자.
정책이 설정되어있지 않기 때문에 빈 배열을 return 한다고 나올 것이다.
(실제로 코드로 돌아가 로직을 다 짜고 user_table에 정보를 넣어주려고 해도 정책 관련 에러가 발생하게 된다. 또한 get요청을 받아오려 해도 return 값으로 [] 이런 빈 배열만 오게된다.)
따라서 우리는 오른쪽의 Create Policy 버튼을 클릭해 정책을 추가해줘야한다.
오른쪽의 Enable insert for users based on user_id 를 선택해주면 자동으로 왼쪽의 코드가 수정된다.
Authentication의 uid와 user_table 의 user_id 가 일치하는지 확인 후 insert 를 허가해주겠다 라는 정책인데 우리의 user_table 에는 user_id 가 없다. 하지만 id 가 존재하므로 해당 줄을 아래와 같이 변경해주자.
(select auth.uid()) = id이렇게 하고 저장해주면 이제
Authentication의 uid와 user_table 의 id 가 일치하는 요청의 경우 user_table에 insert 가 정상 작동하게 하는 정책이 생성되게 된다.
코드 추가
위의 회원가입을 통해 받아온 data를 찍어보면 data객체 안에 user객체 안에 uid, email등의 정보가 저장되어있는 것을 확인할 수 있다.
위에서 설정해준 정책처럼 user_table의 id에 회원가입 성공 시 발급 된 uid를 넣어주어야 하기 때문에 아래와 같이 코드를 작성해주면 된다.
const signupFunction = async () => {
const { data, error } = await supabase.auth.signUp({
email: emailRef.current.value,
password: passwordRef.current.value,
});
if (error) {
throw error;
}
const userData = await supabase.from("user_table").insert({
id: data.user?.id, // 회원가입 성공 시 받아온 data중 id(uid) 값을 가져온다.
email: data.user?.email,
created_at: data.user?.created_at,
nickname: nicknameRef.current.value
});
console.log(userData);
};이렇게 작성해주면 회원가입과 동시에 Authentication에 유저가 추가 될 뿐만 아니라
아래와 같이 user_table에 회원 정보가 기록되게 된다.
로그인
supabase의 로그인은 회원정보를 저장한 user_table이 아닌 Authentication 의 정보를 기반으로 작동된다.
const loginFunction = async () => {
await supabase.auth.signInWithPassword({
email: idRef.current.value,
password: passwordRef.current.value,
}).then(() => {
console.log('로그인 성공!!')
}).catch((error)=>{
console.log(error)
})
}로그인 시도시 성공과 동시에 우리의 session Storage에 accessToken이 저장되게 된다.
( 굳이 우리가 토큰을 저장해줄 필요가 없기 때문에 매우 편리하다. )
지금까지 supabase를 통해서 초기 셋팅, 회원가입, 로그인 까지 구현을 해보았다.
프론트엔드 개발자로서 혼자 프로젝트를 진행하는 것은 매우 어려운 작업인데
supabase는 이를 가능하게 해준다.
다음 시간에는 supabase 를 통한 CRUD 에 대해 알아보도록 하겠다.
