20241115(금) ▶️ 일반 이메일 회원가입, 로그인 구현하기

소셜 로그인에 이어서 일반 회원가입과 로그인을 구현해보려고 한다✨

 

 

 

회원가입

//일반 회원가입
export const signUpEmail = async (email: string, password: string) => {
  try {
    const { data, error } = await supabase.auth.signUp({
      email,
      password,
    });

    if (error) throw error;
    return data;
  } catch (error) {
    if (error instanceof Error) {
      throw new Error(`회원가입에 실패했습니다. ${error.message}`);
    }
  }
};

 

Supabase에서 제공하는 signUp함수를 가져온다.

email과 password 데이터를 보내주고 세 계정 생성을 요청한다.

 

 

 

 

 

 

//SignupForm.tsx
const handleSubmit = async (data: SignUpType) => {
  try {
    await signUpEmail(data.email, data.password);

    toast({
      title: "회원가입이 완료되었습니다!",
    });

    push("/login");
    
  } catch (error) {
    if (error instanceof Error) {
      toast({
        title: error.message,
      });
    }
  }
};

 

그리고나서 회원가입 버튼과 함수를 바인딩 시켜주면 끝😊

 

 

 

 

 

---

 

로그인

//일반 로그인
export const signInWithEmail = async (email: string, password: string) => {
  try {
    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });
    if (error) throw error;
    return data;
  } catch (error) {
    if (error instanceof Error) {
      throw new Error(`로그인에 실패했습니다. ${error.message}`);
    }
  }
};

 

수파베이스의 signInWithPassword 함수를 가져와서

사용자가 입력한 이메일과 비밀번호를 보내준다.

일치하면 세션 생성 및 로그인을 처리한다.

 

 

 

 

 

//로그인 버튼 핸들러
const handleSubmit = async (data: LoginType) => {
  try {
    await signInWithEmail(data.email, data.password);
  } catch (error) {
    if (error instanceof Error) {
      if (error.message.includes("Invalid login credentials")) {
        form.setError("email", {
          message: "이메일 또는 비밀번호가 일치하지 않습니다.",
        });
        form.setError("password", {
          message: "이메일 또는 비밀번호가 일치하지 않습니다.",
        });
      }
    }
  }
};

 

validation은 `react-hook-form`중 `setError`을 사용해서 불러왔고

Supabase에서 사용자 데이터가 없거나 비밀번호가 일치하지 않을 때 나오는 에러메시지를

`이메일 또는 비밀번호가 일치하지 않습니다. `로 커스텀 하기 위해 `includes`를 사용했다.

 

 

 

 

---

결과

 

 

 

 

 

로그인 실패시