20241113(수) ▶️ 이메일 회원가입시 랜덤 닉네임 부여해서 적용하기

소셜 로그인을 구현했을시 닉네임을 받아오게 설정했는데,

일반 이메일로 회원가입 할때는 최소한의 빠른 회원가입을 위해서

이메일과 패스워드만 받고, 닉네임은 일단 우선으로 랜덤으로 닉네임을 부여하기로 생각했다.

 

 

 

 

//랜덤 닉네임 api 불러오기

import axios from "axios";

const SERVER_URL = process.env.NEXT_PUBLIC_RANDOM_NICKNAME_URL;

const getRandomNickname = async () => {
  try {
    const { data } = await axios.post(SERVER_URL!, {
      lang: "ko",
    });
    return data;
  } catch (error) {
    if (error instanceof Error) {
      console.log("Error nickname", error.message);
    }
  }
};

export default getRandomNickname;

 

한글 랜덤닉네임을 부여하는 api를 찾아서 api를 먼저 가져왔다.

 

 

 

 

 

 

 

수파베이스 일반 이메일 회원가입

//일반 회원가입
export const signUpEmail = async (email: string, password: string) => {
  try {
    const nickname = await getRandomNickname();

    const { data, error } = await supabase.auth.signUp({
      email,
      password,
      options: {
        data: {
          name: nickname.data,
        },
      },
    });

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

 

그리고 일반 이메일 회원가입시 사용하는 함수에서 nickname 데이터를 받아서

Supabase 회원가입 구조에 맞게 데이터를 전송해준다.

 

 

 

email,           // 필수: 이메일
  password,        // 필수: 비밀번호
  options: {       // 선택: 추가 옵션들
    data: {        // 사용자 메타데이터
      name: nickname.data  // 닉네임 저장
    }
 }

 

 

 

 

 

 

회원가입 닉네임 처리를 signUpEmail 함수에 해줬으니

handleSubmit함수는 간단하게 사용자가 입력한 값, 이메일과 패스워드만 받아서 전달해주면 된다 😊

//일반 이메일 회원가입 버튼
  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,
        });
      }
    }
  };

 

 

 

 

 

 

가입을 완료하면 이렇게 랜덤으로 부여된 닉네임을 확인할 수 있다😊