Authentication 2 - Log out, Firebase Error, Log in, Github Login

1. Log Out

앞의 게시물에서 작성한 firebase 코드로, 가입한 계정이 로그인이 되었으니깐 이제 로그아웃을 하자.

일단 Home으로 가서 그냥 확인용으로 로그아웃 버튼을 만들자.

 

로그아웃은 firebase 파일에서 생성한 auth 인스턴스를 호출한 다음 signOut만 하면 된다.

// home.tsx

import { auth } from '../firebase';

export default function Home() {
  const logOut = () => {
    auth.signOut();
  };
  return (
    <h1>
      <button onClick={logOut}>Log Out</button>
    </h1>
  );
}

 

2. Firebase Error

createAccount.tsx에서 try-catch 블록을 이용한 에러를 다루어보자.

가입을 할 때 이미 존재하는 이메일이거나 비밀번호가 매우 하찮을 때 catch에서 에러를 잡을 것이다.

먼저 이미 존재하는 email을 넣어서 console.log로 e를 찍어보면 다음과 같이 나온다.

FirebaseError라는 것이 나오는데 firebase에서 제공하는 error이다.

 

catch 블록에서 e를 FirebaseError로 instance 해보자.

catch (e) {
  if (e instanceof FirebaseError) { }
}

 

FirebaseError를 들여다 보면 이렇게 나온다.

code도 제공하고 Error를 extends하기 때문에 message도 제공한다.

 

e.code와 e.message를 console.log로 찍어보면 다음과 같이 나온다.

이걸 이용해서 setError에 메세지를 넣자.

// createAccount.tsx

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setError('');
    ...
    try {
      ...
    } catch (e) {
      if (e instanceof FirebaseError) {
        setError(e.message);
      }
    } finally {
      ...
    }
  };

 

가입폼 맨 마지막에 에러가 발생할 경우 error state가 나오게 작성하였으니 에러가 발생하면 맨 마지막에 console 로 본 메세지를 볼 수 있을 것이다.

 

 

3. Log In

3.1 login

login 페이지를 만들기 위해 createAccount.tsx 코드를 복사해서 붙여넣쟈!

로그인과 상관없는 name과 관련된 것과 계정생성을 위한 함수를 모두 지우자.

로그인 또한 역시 await를 한 후 firebase에서 제공해 주는 함수를 쓰면 된다.

바로바로 signInWithEmailAndPassword이다.

해당 함수를 쓰다보면 같은 이름의 함수를 firebase/auth와 cordova에서 제공할텐데 반드시 firebase/auth를 선택해야한다!

 

로그인 함수에도 역시나 firebase.ts에서 선언한 auth가 필요하다.

await signInWithEmailAndPassword(auth, email, password);

 

로그인 함수를 사용하면 UserCredential을 반환한다.

여기서는 누가 로그인했는지 신경 쓸 필요가 없지만, 이메일 주소와 비밀번호가 일치하지 않는 경우에 이 시도가 실패할 거라는 건 중요하다.

 

잘못된 비밀번호를 쓴다면 이렇게 나올 것이다.

 

 

 

3.2 기타 등등

이제 화면 맨 밑에 계정 생성 화면이나 로그인 화면으로 바로 갈 수 있는 스위치 같은 걸 만들고싶다.

로그인과 회원가입 화면 맨 밑에 아래와 같은 걸 넣자.

      <Switcher>
        Already have an account? <Link to="/auth/login">Log in &rarr;</Link>
      </Switcher>

 

 

로그인화면과 회원가입화면이 비슷하니깐 공통적인 걸 넣기 위해 components 폴더에 authComponents.ts 파일을 하나 만들자.

두 화면에서 정의한 styled-components를 복사해서 export를 넣은 후 authComponents.ts 에 넣어주자.

그러면 스타일을 변경하면 두 화면에서 모두 적용될 것이다.

 

 

 

4. Github Login

인증 방식에 소셜 로그인을 추가해보자!

 

이메일, 비밀번호 가입과 마찬가지로 Firebase 콘솔에서 먼저 해당 기능을 등록한 후 우리 프로젝트 코드에 추가해주면 된다.

 

4.1 firebase 콘솔 설정

콘솔 메뉴에서 sign-in method를 클릭하고, Add new provider(새 제공업체 추가)를 한 후 github를 선택하자!

github 인증은 구현하기 쉽고 데이터나 권한, 승인 프로세스를 너무 많이 요청하지 않기때문에 짱 좋다!

 

오른쪽 위에 Enabel(사용 설정)을 활성화 하자.

https://github.com/settings/developers 

GitHub: Let’s build from here

이를 위에 위 페이지로 이동한다.

 

오른쪽 위에 New OAuth App을 클릭한다.

앱 이름로 url 등등을 넣어야하는데, url은 아직 없으니깐 firebase에서 제공하는 url을 넣자.

전체를 넣으면 안되고 com까지!

 

 

그리고 Authorization callback URL에 위의 전체 url을 넣는다.

 

 

그리고 Register application을 클릭!

 

이제 client Id와 client 보안 비밀번호를 받을 수 있을 것이다.

client id를 복사해서 firebase 콘솔 페이지에 넣는다.

비밀번호는 아래 사진 오른쪽 버튼을 클릭해서 인증을 한 후 얻을 수 있는데, 한번 지나가면 다시는 볼 수 없고, 다시 생성해야하니 잃어버리지 말자!

 

비밀번호까지 firebase 콘솔에 넣고 저장을 누르자!

이렇게 github까지 추가되었다!

 

4.2 프로젝트 코드 설정

이제 우리 프로젝트 코드에 설정을 해주자!

components 폴더에 github-btn.tsx 파일을 만들거당!

일단 public 폴더에 icon 폴더를 만든 후 github-logo.svg 파일을 만들고 깃헙 로고 svg를 넣어주었다.

// github-logo.svg

<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/>
</svg>

 

// githubBtn.tsx

import styled from 'styled-components';

const Button = styled.span`
  margin-top: 50px;
  background-color: #24292f;
  font-width: 400;
  color: #fff;
  width: 100%;
  padding: 10px 20px;
  border-radius: 50px;
  border: 0;
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
`;
const Logo = styled.img`
  height: 25px;
`;

export default function GithubButton() {
  return (
    <Button>
      <Logo src="/icon/github-logo.svg" />
      Continue with Github
    </Button>
  );
}

 

이 깃헙 버튼을 login과 createAccount 페이지에 넣어주자.

 

이제 Button에 클릭 이벤트를 달건데, firebase 콘솔에 github 로그인을 등록해줬기때문에 firebase에서 제공하는 생성자를 사용할 수 있다.

GithubAuthProvider 인데, 역시나 cordova가 아닌 firebase/auth에서 가져와야한다.

  const onClick = () => {
    const provider = new GithubAuthProvider();
  }

await를 쓰고 로그인을 할건데, 두개의 옵션이 있다.

하나는 signInWithPopup이고 하나는 signInWithRedirect이다.

먼저 popup부터 해주자.

import { GithubAuthProvider, signInWithPopup } from 'firebase/auth';

const onClick = async () => {
    try {
      const provider = new GithubAuthProvider();
      await signInWithPopup(auth, provider);
    } catch(e) {
      console.error(e);
    }
}

이제 버튼을 클릭하면 팝업이 뜨면서 Glee Paw 인증 창이 뜬다.

콘솔창을 열면 팝업 요청을 취소했다는 에러가 뜬다.

 

이번엔 리다이렉션을 이용해서 로그인하는 걸로 바꿔보자.

import { GithubAuthProvider, signInWithRedirect } from 'firebase/auth';  
  
const onClick = async () => {
    try {
      const provider = new GithubAuthProvider();
      await signInWithRedirect(auth, provider);
    } catch(e) {
      console.error(e);
    }
}

 

필요한 파라미터는 아까와같이 auth 인스턴스와 provider이다.

 

이제 깃헙 로그인 버튼을 클릭하면 화면이 깜빡이면서 어디론가 이동되고 있다.

 

이렇게 두가지 옵션을 사용할 수 있다.

 

다시 popup으로 바꿔보자,

이미 가입한 이메일 계정이 있는데, 깃헙 또한 같은 계정이면 다음과 같은 에러가 뜬다,

계정이 이미 존재하지만 다른 자격 증명을 사용하여 로그인을 시도한다는 오류이다,

깃헙으로 로그인을 시도했지만 이미 이메일과 비밀번호를 사용해 만들어진 계정이니 이메일과 비밀번호를 사용하여 로그인 하라는 뜻이다.

 

4.3 리다이렉트

이제 깃헙 로그인이 잘 되었으면 사용자를 Home으로 리다이렉션 해주자.

역시나 react-router-dom의 useNavigate를 사용한다.

  const navigate = useNavigate();
  const onClick = async () => {
    try {
      const provider = new GithubAuthProvider();
      await signInWithPopup(auth, provider);
      navigate('/');
    } catch (e) {
      console.error(e);
    }
  };

 

 

 

 

 

5. 비번 찾기!

비밀번호를 잊었을 경우엔 찾기 링크를 클릭하여 찾아야한다!

이번엔 해당 기능을 구현해보자.

 

파이어베이스 콘솔에서 가입한 회원들의 목록들의 맨 오른쪽 닷닷닷을 클릭해보면 reset password 라는 항목이 있다. 해당 항목을 클릭하면 회원에게 비밀번호를 변경할 수 있는 이메일을 전송할 수 있다.

그리고 회원은 이메일로 받은 링크를 클릭하면 비밀번호를 재설정할 수 있는 페이지로 이동하여 재설정할 수 있다

 

해당 작업을 front-end에서 호출할 수도 있다.

아래를 호출하면 된다.

sendPasswordResetEmail

 

 

 

 

 

 

 

 

---

 

출처

노마드코더

https://nomadcoders.co/nwitter

All Courses – 노마드 코더 Nomad Coders