Firebase 이란 ? Firebase 사용 방법 - 사용자 인증편(로그인,로그아웃,프로필 수정)

Firebase

파이어 베이스는 2011년 파이어 베이스사가 개발하고 2014년 구글에 인수된 모바일 및 웹 애플리케이션 개발 플랫폼이다.

 

사용자 인증 , 데이터 리얼타임 처리 , 데이터 보관  등등 백앤드나 서버를 구축해야 할 수 있는 것들을 쉽게 해주는 개발 플랫폼이라고 합니다. 

 

Firebase를 이용하면 좋을 때와 안 좋을 때

이용해야 할 때는 개발을 하다 보면 아이디어를 실현시키고 싶을 때가 많은 데 남들이 같은 아이디어로 출시하기 전 실제 사용자들의 반응을 빠르게 받아보고 싶을 때 , 비즈니스 아이디어를 테스트해보고 싶을 때 사용하면 좋습니다.

 

반대로 사용하면 안 좋을 때는 실제 진지하게 프로젝트를 진행해보고자 할 때 , 혹은 프로젝트를 사업으로 진지하게 임하려고 자세를 취할 때 등등에는 실제 데이터 정보 같은 경우가 모두 구글 쪽으로 가버려서 너무 의존적이게 되어 좋지 않습니다. 

 

결론은 초반에 시간을 절약해서 간단하게 사용자의 반응을 보다가 성장 가능성이 보이면 서버와 백앤드 로직을 따로 구축하여 파이어 베이스가 해주던 것들을 우리의 로직으로 변경해주면 되겠습니다.

 

Firebase의 요금제

 

Fireabase 가 무료로 제공하는 한도를 파악해야 합니다.  저희의 프로젝트에서는 아마도 요금이 발생하지 않을 것인데 그래도 얼마까지 무료인지 , 사진을 올릴 때 용량을 제한해야 하는지 등등 설정할 때 도움이 될 것입니다.

 

Firebase Pricing

 

시작하기

1. 파이어 베이스에 들어가서 로그인 후 프로젝트 만들기를 눌러줍시다.

 

프로젝트 이름 입력해주세요

만들어 지는중..

 

2. 본인이 이용할 환경에 맞춰서 클릭해줍니다.

 

 

저의 경우 웹이였습니다.

 

앱을 등록해줍시다.

 

설명을 따라줍니다.

 

npm install firebase

저의 경우 firebase.ts 파일을 만들어서 export 해주었습니다.

firebase 의 console 이 잘 나오는 모습

 

3.. env 파일 설정하기 ( 선택사항 )

깃허브에 firebase 키를 올리기 싫은 사람들은. env 파일에서 설정 후에 올려주면 됩니다. 이 사항은 선택사항입니다. 보안을 위한 것이 아닙니다. 깃허브에 코드를 올리기 싫은 사람들을 위한 것입니다. 

 

CRA로 만든 프로젝트는. env에서 REACT_APP_**** =**** 형식으로 만들어야 제대로 작동한다고 합니다.

 

.env를 이용한 모습

 

4. Firebase 사용자 인증해주기 Auth 

 

firebase에서 auth부터 인증해야 한다고 합니다.

 

App.tsx

import Footer from 'components/Footer';
import { authService } from 'firebase';
import { User } from 'firebase/auth';
import { useState } from 'react';
import AppRouter from 'router/AppRouter';

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState<User | null>(
    authService.currentUser
  );

  return (
    <>
      <AppRouter isLoggedIn={isLoggedIn} />
      <Footer />
    </>
  );
}

 

firebase.ts

import { getAuth } from 'firebase/auth';
export const authService = getAuth();

 

5. 사용자 인증 설정 해주기

 

 

왼쪽에서 authentication을 선택 후 로그인 방법 설정을 누릅니다

들어오셔서 제공할 로그인 서비스를 활성화해주세요.

 

6. 이메일과 비밀번호로 사용자 가입, 로그인시키기

 

웹사이트에서 Firebase 인증 시작하기  |  Firebase Documentation

 

email , password value를 각각 state에 저장시키고 

 

가입 시 createUserWithEmailAndPassword(getAuth() , email , password  )를 하면 가입이 됩니다

 

signInWithEmailAndPassword 은 유저를 로그인시킵니다.

 

  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    let data;
    try {
      if (newAccount) {
        data = await createUserWithEmailAndPassword(
          authService,
          email,
          password
        );
      } else {
        data = await signInWithEmailAndPassword(authService, email, password);
      }
    } catch (error) {
      console.log(error);
    }
  };
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const {
      target: { name, value },
    } = e;
    if (name === EMAIL_NAME) {
      setEmail(value);
    } else if (name === PASSWORD_NAME) {
      setPassword(value);
    }
  };
  return (
    <Container>
      <Form onSubmit={onSubmit}>
        <Input
          value={email}
          onChange={onChange}
          name={EMAIL_NAME}
          type="name"
          required
          placeholder="Name"
        />
        <Input
          value={password}
          onChange={onChange}
          name={PASSWORD_NAME}
          type="password"
          required
          placeholder="Password"
        />
        <Input type="submit" value={newAccount ? 'Create Account' : 'Log In'} />
      </Form>
      <LoginSelectBox>
        <LoginSelect>Continue with Google</LoginSelect>
        <LoginSelect>Continue with Github</LoginSelect>
      </LoginSelectBox>
    </Container>
  );
}

가입이 된 모습

 

7. 유저가 로그인 상태인지 확인하기

 

onAuthStateChanged 기능을 사용하면 할 수 있습니다.

 

  const [init, setInit] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
  useEffect(() => {
    authService.onAuthStateChanged((user) => {
      if (user) {
        setIsLoggedIn(true);
      } else {
        setIsLoggedIn(false);
      }
      setInit(true);
    });
  }, []);

 

8. 소셜 로그인 기능

 

provider과 signInWIthPopup을 이용하면 됩니다.

 

  const onSocialClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
    const {
      currentTarget: { name },
    } = e;
    let provider;
    if (name === GOOGLE) {
      provider = new GoogleAuthProvider();
    } else if (name === GITHUB) {
      provider = new GithubAuthProvider();
    }
    provider && (await signInWithPopup(authService, provider));
  };
  
        <LoginSelectBox>
        <LoginSelect name={GOOGLE} onClick={onSocialClick}>
          Continue with Google
        </LoginSelect>
        <LoginSelect name={GITHUB} onClick={onSocialClick}>
          Continue with Github
        </LoginSelect>

 

 

https://firebase.google.com/docs/auth/web/google-signin#web-version-9_4

자바스크립트에서 Google 로그인을 사용하여 인증  |  Firebase Documentation

구글 로그인 성공

 

깃허브 로그인 창

 

깃허브 로그인 성공

 

 

9. 로그아웃

getAuth()를 불러와 signOut() 일하면 로그아웃 됩니다.

 

export default function Profile() {
  const navigate = useNavigate();
  const onLogoutClick = () => {
    authService.signOut();
    navigate('/');
  };
  return (
    <Container>
      <Logout onClick={onLogoutClick}>Log Out</Logout>
    </Container>
  );

 

10. 사용자의 로그인 상태 지속성 관리

 

local은 사용자의 로컬 스토리지에 저장하여 유저를 불러오고  , secssion은 탭을 끄면 로그아웃이 되며  , none은 새로고침 시 로그아웃 상태인 것을 의미합니다.

 

 

https://firebase.google.com/docs/auth/web/auth-state-persistence

인증 상태 지속성  |  Firebase Documentation

 

11. 프로필 수정

 

updateProfile을 통해 수정할 수 있습니다.

 

 

https://firebase.google.com/docs/auth/web/manage-users

Firebase에서 사용자 관리하기  |  Firebase Documentation

import { updateProfile } from 'firebase/auth';  
  
  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (userName !== newDisplayName) {
      await updateProfile(userObj, { displayName: newDisplayName });
    }
  };