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

728x90
반응형

 

▼ Firebase 환경 설정하기 ▼

 

#02 React 프로젝트에서 Firebase 환경 설정하기

2023.11.21 - [Database] - FireBase 주요 서비스 기능 (Authentication , Firestore , Storage ) FireBase 주요 서비스 기능 (Authentication , Firestore , Storage ) 1. FireBase 개념 (1) 구글이 제공하는 서버리스(serverless) 플랫폼 ▶

zerotonine2da.tistory.com

▼파이어베이스 API 라이브러리 참고 자료 (사용법): 외우지 말고 찾아서 사용하기!  ▼

 

JavaScript 프로젝트에 Firebase 추가

의견 보내기 JavaScript 프로젝트에 Firebase 추가 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 이 가이드에서는 웹 앱에서 또는 최종 사용자의 액세스를 위한

firebase.google.com


1. Authentication (인증) : 회원가입

 

 

(1) VS code 코드 작성

[firebase.js]

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
 
~~firebaseConfig~~

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

▶ import & export 작업해주기

 

[App.js]

import { useEffect, useState } from 'react';
import { auth } from './firebase';
import { createUserWithEmailAndPassword } from 'firebase/auth';

const App = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
 
    const onChange = (event) => {
        const {
            target: { name, value },
        } = event;
        if (name === 'email') {
            setEmail(value);
        }
        if (name === 'password') {
            setPassword(value);
        }
    };


    const signUp = (event) => {
        //회원가입
        event.preventDefault();
        createUserWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                // Signed in
                const user = userCredential.user;
                console.log('user', 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;

▼  회원가입 {signUp} 부분 리팩토링하면 아래와 같음 ( 이 방법을 추천)▼

    const signUp = async (event) => {
        //회원가입
        event.preventDefault();
        try {
            const userCredential = await createUserWithEmailAndPassword(auth, email, password);

            console.log('user', userCredential.user);
        } catch (error) {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log('error', errorCode, errorMessage);
        }
    };

1) async + await 로 변경 

2) try ~catch문 적용

 

 

▼ createUserWithEmailAndPassword함수 사용법 ▼

▶ 사용 예시 :  createUserWithEmailAndPassword(auth, 'test@gmail.com', '1234');

▶ 비동기적으로 작동 + promise를 반환함

▶ 성공시 : then ( (userCredential === 유저정보))

 

 

 

[★오류 발생 -> 파이어베이스 홈페이지가서 설정확인 필요 ]

 

(2) 파이어베이스 홈페이지에서 설정 (회원가입시 이메일/비밀번호 사용)

▶ Authentication 클릭 "시작하기" 버튼  Sign-in Mehtod에서 이메일/비밀번호 클릭 →사용설정 클릭 후 저장

 

▶ 새로고침 : 파이어베이스 홈페이지 User 부분에서 등록된 정보 확인 가능

 

 

2. Authentication (인증) : 사용자 인증정보 확인 및 로그인 상태 변경시 사용

 

[App.js]

import { useEffect, useState } from 'react';
import { auth } from './firebase';
import { createUserWithEmailAndPassword, onAuthStateChanged } from 'firebase/auth';

const App = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    useEffect(() => {
        //홈페이지 열자마자 사용
        onAuthStateChanged(auth, (user) => {
            console.log('user', user);
        });

        //현재 로그인한 유저 정보
        //auth.currentUser;
    }, []);

1) 로그인 상태 변경시 onAuthStateChanged 사용

2) 현재 로그인한 유저 정보 auth.currentUser;

 

끝.

 


Authentication (로그인 기능 구현) ▼

 

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

▼(회원가입 기능 구현) ▼ #03 React 프로젝트에서 Firebase 사용하기 : Authentication (회원가입 기능 구현) ▼ 2023.11.21 - [Database] - #02 React 프로젝트에서 Firebase 환경 설정하기 ▼ #02 React 프로젝트에서 Fi

zerotonine2da.tistory.com


 

반응형