6/4 TIL

📖 진행한 공부 📖

• 로그인 기능 수정
• 뉴스 피드 프로젝트 회원가입 기능 구현

로그인 기능 수정

어제 뭘 건드렸는지 회원가입을 진행한 아이디, 비밀번호로 로그인을 하면 계속 else일 때 뜨는 alert창이 계속 뜨는데, 또 로그인은 되는 이상한 현상을 겪고 있다.

콘솔로그에도 잘 찍히는데 도대체 뭐가 문제인지 코드에서 한 번 찾아봤다..

 const signInWithEmailPassword = async (e) => {
    e.preventDefault();
    try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password
      });
      if (error) {
        throw error;
      }
      console.log(data);
      if (data) {
        setSignIn(true);
        alert(`${session.user.user_metadata.nickname}님 환영합니다.`);
        navigate('/');
      } else {
        alert('등록된 정보가 아닙니다. 회원가입을 진행해주세요.');
      }
    } catch (error) {
      console.error('로그인 중 오류 발생:', error.message);
      alert('존재하지 않는 아이디, 비밀번호입니다.');
    }
  };

어제의 코드를 다시 보니깐 뭐가 문제인지 단 번에 찾아버렸다..

콘솔창을 보니 data는 잘 찍히는데 82번째 줄인 alert가 문제인 걸 보니깐 딱 드는 생각

도대체 난 왜 data를 받아놓고 alert에는 session.user의 정보를 찾고 있었는가.. 해당 부분을 바로 수정해줬다.

alert(`${data.user.user_metadata.nickname}님 환영합니다.`);

이렇게 코드를 수정한 뒤 작동을 시켜봤다!! 두근두근

이제서야 로직이 정상적으로 작동하는 걸 볼 수 있었다.. 감격

확실히 저런 단어 실수 하나때문에 코드 자체가 먹통이 되어버리니
조심 또 조심해야겠다..

그리고 또 다른 문제의 직면..

이번에는 Github로 로그인 버튼의 기능이 먹통이다.

원래 Github로 로그인 버튼을 누르면 첫 로그인 시에만 Github 페이지에서 연동창이 뜨고, 한 번 연동을 하고 나면 버튼 클릭만 해도 알아서 Github로 로그인이 되면서 홈페이지로 이동이 돼야 하는데 회원가입이 필요하다는 alert창이 뜨고난 후, 회원가입 페이지를 거쳐 홈페이지로 이동하는 것이다.. 이게 무슨 난장판인가?
문제의 코드를 살펴보자.

 async function signInWithGithub() {
    const { error, data } = await supabase.auth.signInWithOAuth({
      provider: 'github'
    });
    console.log(error);
    console.log(data);
    if (error) {
      console.error('깃허브 로그인 에러', error.message);
      alert('로그인 오류가 발생하였습니다, 다시 시도해주세요.');
    }
    console.log('OAuth 데이터:', data);

    if (data && data.user) {
      setSignIn(true);
      navigate('/');
    } else {
      setSignIn(false);
      alert('회원가입이 필요합니다.');
      navigate('/signup');
    }
  }

   const signOut = (e) => {
    e.preventDefault();
    setSignIn(false);
   }

진짜 나는 바보인가 보다 콘솔로그를 살펴보면 data 안에 user라는 정보가 없는데 계속 if문에다가 data와 그 data 안에 user가 있을 시에 로그인을 시키고, 홈페이지로 이동하게끔 하고 있는데 있지도 않은 user의 정보를 찾고 있으니 계속 else문이 작동되는 것이었다

기존의 코드에서 && data.user를 지워주고, setSignIn 상태는 따로 true,false로 정해주지 않아도 되는 거 같아서 지워줬다.

if (data) {
      navigate('/');
    } else {
      alert('회원가입이 필요합니다.');
      navigate('/signup');
    }
  }

수정을 해주니 회원가입이 필요하다는 alert는 보이지도 않고 잘만 작동한다.

회원가입 기능 구현

윗부분 스타일 컴포넌트 코드는 제외하고 기능적인 동작을 하는 코드들만 적었다.

const SignUpPage = () => {
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [nickname, setNickname] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const signUpWithEmail = async (e) => {
    e.preventDefault();
    try {
      setIsSubmitting(true);
      const { error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          data: {
            nickname,
          }
        }
      });

      if (error) {
        throw error;
      }

      navigate('/login');
    } catch (error) {
      console.error('회원가입 오류 발생', error.message);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleSignUp = async () => {
    try {
      setIsSubmitting(true);
      const { error } = await supabase.auth.signInWithOAuth({
        provider: 'github'
      });

      if (error) {
        throw error;
      }

      navigate('/');
    } catch (error) {
      console.error('GitHub 로그인 중 오류 발생:', error.message);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Container>
      <Title>회원가입 페이지</Title>
      <Form onSubmit={signUpWithEmail}>
        <Input 
          type="email" 
          name="email" 
          placeholder="이메일" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
          required 
        />
        <Input 
          type="password" 
          name="password" 
          placeholder="비밀번호" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
          required 
        />
        <Input 
          type="text" 
          name="nickname" 
          placeholder="닉네임" 
          value={nickname} 
          onChange={(e) => setNickname(e.target.value)} 
          required 
        />
        <Button type="submit" disabled={isSubmitting}>
          {isSubmitting ? '가입 중...' : '회원가입'}
        </Button>
      </Form>
      <Button onClick={handleSignUp} disabled={isSubmitting}>
        {isSubmitting ? '로딩 중...' : 'GitHub로 회원가입'}
      </Button>
      <Button onClick={() => navigate('/login')}>로그인</Button>
    </Container>
  );
};

export default SignUpPage;

따로 특별한 건 없지만 disabled={isSubmitting}를 써줌으로써 사용자가 버튼을 여러번 클릭하는 것을 방지해줬다.

isSubmitting은 회원가입 양식이 서버로 데이터를 제출하고 있는지 여부를 나타내는 상태인데 이 값이 true면 회원가입 버튼을 클릭할 때 서버로 데이터를 전송하고 있는 중임을 나타내며, false라면 데이터 전송이 완료되었거나 아직 시작되지 않았음을 나타낸다.

isSubmitting 상태 변수는 회원가입 버튼의 활성화 또는 비활성화를 제어하고 사용자가 중복으로 회원가입을 시도하는 것을 방지하는 기능으로 사용되고 있다.

추가적으로 로그아웃을 한 후에 setSignIn이 false가 됐는데도 새로고침을 하면 다시 자동 로그인이 돼버려서 강제로 true로 바뀌는 부분을 수정했다.

기존 코드

기존 코드를 보면.. try, catch를 어따 갖다 팔았는지 썰렁한 코드만 덩그러니 남아있었다

const signOut = async(e) => {
	e.preventDefault();
  	setSignIn(false);
}

수정 후 코드

  const signOut = async (e) => {
    e.preventDefault();
    try {
      const { error } = await supabase.auth.signOut();
      if (error) {
        throw error;
      }
      setSignIn(false);
    } catch (error) {
      console.error('로그아웃 오류 발생', error.message);
    }
  };

supabase sign out 공식 문서를 보고나서 수정을 하고 나니 로그아웃을 한 후 새로고침을 하면 자동으로 로그인 상태로 바뀌는 오류가 말끔히 잡혔다.

맡은 기능은 얼추 끝나가는 거 같은데 다른 디테일적인 부분이나, 회원가입 절차에서 이메일, 닉네임 중복확인만 하면 될 거 같다