2024/06/04 TIL

회원가입/로그인 팀 프로젝트 코드에 적용하기

기존 코드에서는 로컬스토리지에 회원정보를 저장하고 로그인 할 때 입력한 데이터가 로컬스토리지에서 가져온 회원 정보의 데이터를 가져와서 포함되어있다면 로그인 되도록 구현

=> supabase의 authentication api를 이용해보기 (혼자 연습해뒀던 코드 기반)

 

회원가입 부분

// 인풋에 입력한 email, password, nickName을 authentication의 user정보에 저장

try {

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

                email,

                password,

                options: {

                    data: {

                        nickName,

                        avatarUrl: "https://sngxevhlxxzjbwdbherl.supabase.co/storage/v1/object/public/avatars/dafalut_image2-removebg-preview.png",

                    }

                }

            });

            console.log(data);

            if (error) {

                console.error(error);

            } else {

                setEmail("");

                setPassword("");

                setPasswordConfirm("");

                setNickName("");

                alert(`${data.user_metadata.nickName}`);

                alert("환영합니다 로그인 하실래요?");

                console.log("signup: ", { data, error });

            }

        } catch (error) {

            console.error(error);

        }

 

로그인 부분

// 인풋에 입력한 email, password을 authentication의 user에서 매치되는 데이터가 있다면 로그인 성공, 없다면 에러 출력

try {

            const { data, error } = await supabaseLogin.auth.signInWithPassword({

                email,

                password,

            })

            if (error) {

                console.error(error);

                alert("이메일과 비밀번호를 확인해주세요!");

            } else {

                alert("로그인 되었습니다!");

                const { user } = data;

                console.log(user);

                dispatch(setCurrentUser(user));

            }

        } catch (error) {

            console.error(error);

        }