[Ionic-React] Firebase로 로그인 구현하기

1. 개요

Firebase로 로그인을 구현할 것이다.

아직 회원가입기능을 만들지 않아 오류는  발생하겠지만 진행해 보겠다.

2.코드 상세

//firebaseConfig.ts
import * as firebase from "firebase/app";
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  updateProfile,
  signOut,
} from "firebase/auth";
import { getAnalytics } from "firebase/analytics";

const config = {
  apiKey: "AIzaSyBmYIPAvaJgiBdJ7JrI-D2TaxhQvSrdYcc",
  authDomain: "ionic-react-prac.firebaseapp.com",
  projectId: "ionic-react-prac",
  storageBucket: "ionic-react-prac.appspot.com",
  messagingSenderId: "706253795460",
  appId: "1:706253795460:web:ad315b1967b23d4c6712d1",
  measurementId: "G-B7RWV8BMRZ",
};

firebase.initializeApp(config);
export const auth = getAuth();

export async function loginUser(username: string, password: string) {
  const email = `${username}@asdf.com`;
  try {
    const res = await signInWithEmailAndPassword(auth, email, password);
    console.log(res);
    return true;
  } catch (error) {
    console.log(error);
    return false;
  }
  //authenticate with firebase
  //if present, show dashboard
  //if not, show error
}

//login.tsx
import {
  IonAvatar,
  IonContent,
  IonHeader,
  IonItem,
  IonList,
  IonPage,
  IonText,
  IonLabel,
  IonTitle,
  IonToolbar,
  IonItemOptions,
  IonItemSliding,
  IonItemOption,
  IonButton,
  IonIcon,
  IonInput,
} from "@ionic/react";
import ExploreContainer from "../components/ExploreContainer";
import "./Home.css";
import { atCircle, fingerPrint, star } from "ionicons/icons";
import { KeyboardEvent, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { loginUser } from "../firebaseConfig";

const Login: React.FC = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  async function login() {
    const res = await loginUser(username, password);
    console.log(`${res ? "login success" : "login failed"}`);
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Login Page</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonInput
          value={username}
          type="text"
          placeholder="Username?"
          onIonChange={(e: any) => setUsername(e.target.value)}
        />
        <IonInput
          value={password}
          type="password"
          placeholder="Password?"
          onIonChange={(e: any) => setPassword(e.target.value)}
        />
        <IonButton onClick={login}>Login</IonButton>
        <p>
          New here? <Link to="/resister">Resister</Link>
        </p>
      </IonContent>
    </IonPage>
  );
};

export default Login;

위의 코드로 로그인을 해보자.

auth/configuration-not-found와 login failed 오류가 발생한다.

파이어베이스는 로그인 방식을 어떤식으로 할 것인지 설정을 해주어야 하는데 그 설정을 하지 않았을 때 발생하는 오류이다.

파이어베이스 로그인 방식을 설정해보자.

3. Firebase 로그인 방법 설정

1. 다음과 같이 로그인 방법 설정에 진입한다.
   
2. 기본 제공업체 카테고리에서 이메일/비밀번호를 선택한다.
   
3. 이메일/비밀번호 사용설정을 활성화하고 저장한다.
   

설정을 완료했다.

이제 로그인을 다시 시도해 보자.

역시 에러를 발생시킨다.

에러 내용은 auth/user-not-found.

유저정보가 없다는 내용의 에러인데 당연히 저장된 유저정보없이 로그인을 시도했으니 발생하는 오류이다.

기능적으로는 문제가 없으니 다음 포스팅은 로그인 성공 유무 상태창을 띄워보겠다.