#04 React 프로젝트에서 Firebase 사용하기 : Authentication (로그인 기능 구현)

---

▼(회원가입 기능 구현) ▼

#03 React 프로젝트에서 Firebase 사용하기 : Authentication (회원가입 기능 구현)

---

(1) 기존 사용자 로그인

[App.js]

import { useEffect, useState } from 'react';

import { auth } from './firebase';

import { createUserWithEmailAndPassword, onAuthStateChanged, signInWithEmailAndPassword } from 'firebase/auth';

const App = () => {

 

    const [email, setEmail] = useState('');

    const [password, setPassword] = useState('');

    useEffect(() => {

        //홈페이지 열자마자 사용

        onAuthStateChanged(auth, (user) => {

            console.log('user', user);

        });

    }, []);

    const onChange = (event) => {

        const {

            target: { name, value },

        } = event;

        if (name === 'email') {

            setEmail(value);

        }

        if (name === 'password') {

            setPassword(value);

        }

    };

 

    //로그인

    const signIn = async (event) => {

        event.preventDefault();

        try {

            const userCredential = await signInWithEmailAndPassword(auth, email, password);

            console.log('user', userCredential.user);

        } catch (error) {

            const errorCode = error.code;

            const errorMessage = error.message;

            console.log('error', errorCode, errorMessage);

        }

    };

 

    return (

        <div className="App">

            <h2>로그인 페이지</h2>

            <form>

                <div>

                    <label>이메일 : </label>

                    <input type="email" value={email} name="email" onChange={onChange} required></input>

                </div>

                <div>

                    <label>비밀번호 : </label>

                    <input type="password" value={password} name="password" onChange={onChange} required></input>

                </div>

                <button onClick={signUp}>회원가입</button>

                <button onClick={signIn}>로그인</button>

                <button onClick={logOut}>로그아웃</button>

            </form>

        </div>

    );

};

export default App;

 

(2) 기존 사용자 로그아웃

import { useEffect, useState } from 'react';

import { auth } from './firebase';

import { createUserWithEmailAndPassword, onAuthStateChanged, signInWithEmailAndPassword, signOut } from 'firebase/auth';

const App = () => {

   

    //로그아웃

    const logOut = async (event) => {

        event.preventDefault();

        await signOut(auth);

        //user값이 null이되면 로그아웃 완료

    };

▶user값이 null이되면 로그아웃 완료

 

 

끝.