React 기반 MERN 웹 로그인 할 때 firebase Authentication 사용법 자세히 알려드립니다. (회원가입 , 로그인 코드)

https://firebase.google.com/?hl=ko 

Firebase | Google’s Mobile and Web App Development Platform

FireBase 홈페이지 가서 시작해봅시다

프로젝트를 만듭니다. 

웹 페이지 개발이니까 웹으로 시작합니다. 

SDK를 복사 합니다 .

client 쪽에서 
firebase를 설치해준다 ! 
src > firebase.js 파일 생성하여
SDK 코드를 추가해 준다.  

시작하기 ! 

SDK 수정 

// Import the functions you need from the SDKs you need
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
 /////////////////////////////
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export default firebase;

https://firebase.google.com/docs/auth/web/start?hl=ko 

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

Authentication SDK 추가 및 초기화

1. 아직 진행하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화합니다.
2. Firebase 인증 JS SDK를 추가하고 Firebase 인증을 초기화합니다.

저는 웹 네임스페이스화된 API 를 사용 하였습니다

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

신규 사용자 가입

신규 사용자가 자신의 이메일 주소와 비밀번호를 사용해 앱에 가입할 수 있는 양식을 만듭니다. 사용자가 양식을 작성하면 사용자가 입력한 이메일 주소와 비밀번호의 유효성을 검사한 후 createUserWithEmailAndPassword 메서드에 전달합니다.

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

버전 이 바뀌면서

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

요렇게 써야 되는것 같습니다 .

Register.js 코드

import { React, useState } from 'react'
import LoginDiv from '../../Style/UserCSS'
import firebase from '../../firebase'

const Register = () => {
    const [Name, setName] = useState("");
    const [Email, setEmail] = useState("");
    const [Password, setPassword] = useState("");
    const [Password2, setPassword2] = useState("");

    //promise 형식 필요
    const Register = async (e) => {
        e.preventDefault();

        if (!(Name && Email && Password && Password2)) {
            return alert("모든 값을 채워주세요 ! ");
        }
        if (Password !== Password2) {
            return alert("비밀번호가 일치하는지 확인하세요 !");
        }
        await firebase.auth().createUserWithEmailAndPassword(Email, Password)
            .then((userCredential) => {
                // Signed in 
                var user = userCredential.user;
                user.updateProfile({
                    displayName: Name,
                })
                // ...
                console.log(user)
            })
            .catch((error) => {
                var errorCode = error.code;
                var errorMessage = error.message;
                // ..
            });

    }

    return (
        <LoginDiv>
            <form>
                <label>Name</label>
                <input type='name' value={Name} onChange={(e) => { setName(e.currentTarget.value) }}></input>
                <label>E-mail</label>
                <input type='email' value={Email} onChange={(e) => { setEmail(e.currentTarget.value) }}></input>
                <label>Password</label>
                <input type='password' value={Password} onChange={(e) => { setPassword(e.currentTarget.value) }}></input>
                <label>Password-Check</label>
                <input type='password' value={Password2} onChange={(e) => { setPassword2(e.currentTarget.value) }}></input>
                <button onClick={(e) => { Register(e) }}>회원가입</button>
            </form>

        </LoginDiv>
    )
}

export default Register

console.log를 찍어 보았습니다. 
 

잘 올라간다  MongoBD에도 넣어 보자 

MongoBD

server > Model > User.js

const { default: mongoose } = require("mongoose")

const userSchema = new mongoose.Schema({
    userNum: Number,
    email: String,
    displayName: String,
    uid: String,
}, { collection: "Users" })

const User = mongoose.model("User", userSchema);

module.exports = { User };

MongoBD 세팅 ! 

  // ...
                let body = {
                    email: email,
                    displayName: Name,
                    uid: uid,
                }

                axios.post('/api/user/register', body).then((response) => {
                    setFlag(false);
                    if (response.data.success) {
                        //회원가입 성공시
                        alert("회원 가입을 축하드립니다.");

                        navigate('/login');

                    }
                    else {
                        //회원가입 실패시 
                        return alert('회원가입이 실패하였습니다.');
                    }

데이터를 담아서 api로 server에 전송 

const { Counter } = require("../Model/Counter.js");
const { User } = require("../Model/User.js");


router.post('/register', (req, res) => {

    let data = req.body;
    console.log(data);
    Counter.findOne({ name: "counter" }).then((counter) => {
        data.userNum = counter.userNum;
        const userData = new User(data);
        userData.save().then(() => {
            // data 저장 성공하면 Counter collections에 가서 postNum + 1
            Counter.updateOne({ name: "counter" }, { $inc: { userNum: 1 } }).then(
                () => {
                    res.status(200).json({ success: true });
                });
        });
    })
        .catch(err => {
            console.error(err);
            res.status(400).json({ success: false, message: err.message });
        })

})


module.exports = router;

 

기존 사용자 로그인

기존 사용자가 자신의 이메일 주소와 비밀번호를 사용해 로그인할 수 있는 양식을 만듭니다. 사용자가 양식을 작성하면 signInWithEmailAndPassword 메서드를 호출합니다.

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

Login.js 코드

 

    const SignInFunc = async (e) => {
        e.preventDefault();
        setFlag(true);

        if (!(Email && Password)) {
            return alert("모든 값을 채워주세요 ! ");
        }

        await firebase.auth().signInWithEmailAndPassword(Email, Password)
            .then((userCredential) => {
                setFlag(false);
                var userName = userCredential.user.multiFactor.user.displayName;
                alert(`${userName}님 방문해 주셔서 감사합니다.`)
                // Signed in
                navigate("/list");
                // ...
            })
            .catch((error) => {

                if (error.code === "auth/user-not-found") {
                    setErrorMsg('존재하지 않는 이메일입니다.');
                } else if (error.code === "auth/wrong-password") {
                    setErrorMsg('비밀번호가 일치하지 않습니다.');
                }
                else {
                    setErrorMsg('로그인이 실패하였습니다.');
                }
            });
    }

React App - Avast Secure Browser 2023-08-03 16-14-10.mp4

1.14MB