supabase로 회원가입 구현하는 방법

https://supabase.com/docs/reference/javascript/auth-signup

JavaScript: Create a new user | Supabase Docs

공식 사이트에 힌트는 다 있었다.

 

좀 더 자세히 볼걸.. 좀 더 찾아볼걸..

후회했다.

 

나는 회원가입으로 사용자를 추가할 것이기때문에

Create a user 탭으로 갔고,

이메일과 비밀번호로 로그인을 할 것이만서도

이름과 비밀번호 확인이라는 추가 정보가 있기 때문에

있기 때문에 Sign up with additional user metadata를

선택했다.

 

supabase에 초록색으로 되어있는 부분에는

내 state를 입력해주면 된다.

 

이 함수는 회원가입을 할 때,

모든 데이터가 들어왔을 때,

실행이 되어야 하기 때문에

버튼에 onClick 이벤트로 넣어줬다.

const [frontEmail, setFrontEmail] = useState("");

  const [name, setName] = useState("");

  const [hint, setHint] = useState("");

  const [pw, setPw] = useState("");

  const [pwRe, setPwRe] = useState("");

  const [backEmail, setBackEmail] = useState("@naver.com");

  // 회원가입 함수

  const JoinTicketLink = async () => {

    const { data, error } = await supabase.auth.signUp({

      email: frontEmail + backEmail,

      password: pw,

      options: {

        data: {

          hint: hint,

          name: name,

        },

      },

    });

    if (error) {

      console.error("Sign up error:", error.message);

    } else {

      console.log("Sign up success:", data);

    }

  };

<JoinBtn onClick={JoinTicketLink}>가입</JoinBtn>