[Vue3 + vite + tailwindCSS] firebase 로그인 페이지(인증)

 

이제 회원가입 된 유저를 로그인 진행을 한 후 홈페이지로 이동하게 만들어줄거임

 

로그인도 가입하기와 동일하게 

 

로그인 중일때는 버튼을 클릭하지 못하도록 한다. 

 

    <button v-if="loading" class="w-96 rounded bg-light text-white py-4">

      로그인 중입니다.

    </button>

    <button

      v-else

      @click="onLogin"

      class="w-96 rounded bg-primary text-white py-4 hover:bg-dark"

    >

      로그인

    </button>

 

 

 

 

1. auth와 signInWithEmailAndPassword 를 import하여 사용할거임 

로그인 버튼을 클릭하면 로그인 함수가 실행되며

일단 각 input 태그에 공백이 있는지 검사한다. 만약에  있으면 alert 으로 에러메세지를 출력하며 리턴

 

2.에러가 있을 경우  try catch문을 사용하여 막아준다. 

일단  loading이 시작되며 현재 input에 입력되어있는 email과 password정보를 firebase에서 인증기능을 통해

사용자가 있는지 검사를 하고 있으면 router를 통해서 기본 페이지로 이동한다.

<script> 

import { ref } from "vue";

import { signInWithEmailAndPassword } from "firebase/auth";

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

import { useRouter } from "vue-router";

export default {

  setup() {

    // 변수 ref(초기값) usestate 와 동일

    const email = ref("");

    const password = ref("");

    const loading = ref(false);

    const router = useRouter();

    //회원가입 클릭 시 실행되는 함수

    const onLogin = async () => {

      if (!email.value || !password.value) {

        alert("이메일, 비밀번호를 모두 확인해 주세요.");

        return;

      }

      try {

        loading.value = true;

        const { user } = await signInWithEmailAndPassword(

          auth,

          email.value,

          password.value

        );

        console.log(user.uid);

        router.replace("/"); //뒤로가기 클릭하면 로그인 페이지로 이동못하게함

      } catch (e) {

        switch (e.code) {

          case "auth/invalid-email":

            alert("잘못된 이메일 형식입니다");

            break;

          case "auth/wrong-password":

            alert("비밀번호가 틀립니다.");

            break;

          case "auth/user-not-found":

            alert("등록되지 않은 이메일입니다.");

            break;

          default:

            alert(e.message);

            break;

        }

      } finally {

        loading.value = false;

      }

    };

    return {

      email,

      password,

      loading,

      onLogin,

    };

  },

};

</script>

 

만약에 에러가 있을 경우 

switch문을 활용하여 에러코드에 맞게 출력되는 에러 형식을을 바꿔준다. 

 

 

 

https://firebase.google.com/docs/auth/admin/errors?hl=ko

Admin Authentication API 오류  |  Firebase

 

 

 

 

 

 

 

라우터를 이용하여 정상적으로 로그인되면 

 

기본 페이지로 이동하게 하는데 

 

뒤로가기를 누르면 login페이지로 이동하면 곤란하니까 

 

회원가입 페이지와 다르게

push => replace를 사용한다. 

 router.replace("/"); //뒤로가기 클릭하면 로그인 페이지로 이동못하게함

 

 

정상적으로 로그인되면 콘솔에 uid가 출력됨을 확인한다. 

 

 

 

resgiter(회원가입) 페이지도 예외처리를 위해 수정해준다.

 

 

    //회원가입 클릭 시 실행되는 함수

    const onRegister = async () => {

      if (!username.value || !email.value || !password.value) {

        alert("유저네임, 이메일, 비밀번호를 모두 확인해 주세요.");

        return;

      }

 

 

     } catch (e) {

        switch (e.code) {

          case "auth/invalid-email":

            alert("잘못된 이메일 형식입니다");

            break;

          case "auth/week-password":

            alert("비밀번호가 너무 쉬워요");

            break;

          case "auth/email-already-in-use":

            alert("이미 가입되어 있는 이메일입니다.");

            break;

          default:

            alert("회원가입 실패");

            break;

        }

      } finally {

        loading.value = false; //로딩 종료

      }

    };