Firebase를 사용하여 React에서 인증 시스템을 구축하는 방법

Firebase 란 무엇입니까?

Firebase는 모바일 및 웹 애플리케이션을 만들기 위해 Google에서 유지 관리하는 백엔드 서비스 제공 업체입니다. -확장 가능한 데이터베이스 -클라우드 코드 기능 -사용자 인증 -소셜 미디어 통합 -파일 스토리지 등
을 처리하여 백엔드 측 개발을 자동화하는 플랫폼입니다 .





여기에서 firebase에 대해 자세히 알아볼 수 있습니다 .

이 기사의 주요 초점은 반응 프로젝트에서 Firebase로 인증을 설정하는 것입니다. 기사를 따르려면 React 프로젝트에 이미 설정된 로그인, 가입, 프로필 및 비밀번호 재설정 페이지가 필요합니다.

걱정하지 마세요. 프로젝트가 이미 설정되어 있지 않다면 위의 모든 페이지가 이미 설정된 상태에서 여기 에서이 저장소를 복제 할 수 있습니다 .

이미 프로젝트 설정이있는 경우 다음 단계를 건너 뛰고 'Firebase 설정'섹션으로 바로 이동할 수 있습니다.

프로젝트 초기화

저장소로 이동 하여 녹색 코드 버튼을 클릭하고 URL을 복사 한 후 터미널로 이동하여 다음 명령을 입력하십시오.

git clone https://github.com/pena56/instagram-clone/tree/ft-user-authentication

다음으로 프로젝트 종속성을 설치해야합니다. 시스템에 노드가 설치되어 있는지 확인하십시오. 그렇지 않은 경우 여기에서 노드를 다운로드 할 수 있습니다 . 선호하는 OS에 최신 버전을 다운로드하고 설치 지침에 따라 시스템에 설치하십시오.

이제 노드 설정이 완료되었으므로 프로젝트 종속성을 설치하고 먼저 프로젝트 루트 디렉토리에서 터미널을 열고 명령을 실행할 수 있습니다.

npm install

npm start

홈페이지

이것은 react 및 firebase를 사용하는 instagram-clone 프로젝트입니다. 그리고이 기사는이 클론을 만드는 과정을 설명하는 첫 번째 기사가 될 것입니다.

이미 설정된 4 개의 페이지, 로그인 페이지, 로그 아웃 페이지, 프로필 페이지 및 비밀번호 재설정 페이지가 있습니다.

이제 firebase 설정으로 이동하겠습니다.

Firebase 설정

Firebase를 시작하려면 Google 계정이 있어야합니다. Google 계정이없는 경우 여기에서 가입 할 수 있습니다 .

그래서 머리를 https://firebase.google.com을 클릭하고 오른쪽 상단의 "콘솔로 이동"링크를 클릭합니다. 콘솔 홈 페이지로 이동하면 "프로젝트 추가"버튼과 모든 프로젝트 목록 (있는 경우)이 표시됩니다.

새 프로젝트를 시작하려고하므로 "프로젝트 추가"버튼을 클릭하여 시작합니다.

프로젝트 이름을 입력하라는 메시지가 표시됩니다.이 작업을 수행하고 있기 때문에 내 instagram-clone이라고 부르겠습니다. 원하는대로 이름을 입력하고 "계속"을 클릭하십시오. ”버튼.

Firebase 프로젝트에 대한 Analytics를 설정하라는 메시지가 표시됩니다. 이 설정은 그대로 두겠습니다 만 우리가 작업 할 작업과는 아무 관련이 없습니다. "계속"버튼을 클릭하십시오.

다음 단계는 분석을 활성화 한 경우에만 사용할 수 있으며 분석을 구성 할 계정을 선택해야합니다. 드롭 다운을 클릭하고 "firebase 용 기본 계정"을 선택한 다음 마지막으로 "프로젝트 만들기"버튼을 클릭합니다.

그러면 firebase 프로젝트가 생성됩니다.

여기까지왔다면 축하합니다. Firebase 프로젝트를 성공적으로 만들었습니다.

프로젝트 대시 보드로 이동하려면 "계속"버튼을 클릭하십시오.

시작하려면 프로젝트에 앱을 추가해야합니다. 우리가 만들고있는 프로젝트이기 때문에 웹 앱을 프로젝트에 추가하고 싶습니다. 웹 앱을 추가하려면 "HTML 태그"아이콘을 클릭하십시오.

앱을 등록 할 수있는 페이지로 이동합니다.

먼저 앱의 별명을 제공하십시오. 여기서는 프로젝트 이름 (instagram-clone)을 앱 닉네임으로 사용하겠습니다. 다음으로 앱 호스팅을 설정하는 확인란이 표시됩니다.이 확인란은 선택하지 않은 상태로 둡니다.

애플리케이션에서 호스팅을 설정하려면 계속해서 확인할 수 있지만이 문서에서는 firebase에서 호스팅하는 프로세스를 다루지 않습니다.

"앱 등록"버튼을 클릭합니다

다음 단계는 Firebase SDK를 추가하는 것이지만 나중에 다시 설명하겠습니다.

“Continue to console”버튼을 클릭하여 앱 생성을 완료합니다.

이제 앱에서 인증을 활성화해야합니다. 이를 위해 왼쪽의 "인증"탭을 클릭하면 인증 페이지로 이동합니다. "시작하기"버튼을 클릭하십시오.

사용 가능한 로그인 방법 목록으로 이동합니다.

우리는 사용자가 이메일과 비밀번호로 로그인 할 수 있기를 바랍니다. "이메일 / 비밀번호"옵션을 클릭하고 "활성화"확인란을 선택한 다음 "저장"버튼을 클릭합니다.

이제 firebase에 모든 것이 설정되었습니다. 반응 프로젝트로 넘어갈 시간입니다.

프로젝트에서 firebase와 함께 작업합니다. 먼저 프로젝트에 Firebase SDK 클라이언트 라이브러리를 설치해야합니다. 이렇게하려면 터미널로 이동하여 명령을 실행하십시오.

npm install firebase

하지만 먼저 반응 프로젝트에 firebase 앱의 구성을 추가해야합니다. 이렇게하려면 firebase에 대한 프로젝트 구성 세부 정보가 필요합니다.

따라서 프로젝트 대시 보드로 이동하여 왼쪽 상단의 설정 아이콘을 클릭 한 다음 "프로젝트 설정"옵션을 클릭하십시오.

'Firebase SDK 스 니펫'섹션이 나올 때까지 아래로 스크롤하고 구성 옵션을 클릭하여 firebaseConfig 객체를 표시하고 프로젝트 세부 정보가 포함 된이 객체를 복사합니다.

공개해서는 안되는 정보가 포함되어 있으므로 .env 파일에 정보를 저장합니다.

따라서 프로젝트 루트 디렉토리에서“.env.local”이라는 새 파일을 생성하면 파일의 내용은 다음과 같습니다.

REACT_APP_FIREBASE_API_KEY = <your api key>
REACT_APP_FIREBASE_AUTH_DOMAIN = <your auth domain>
REACT_APP_FIREBASE_PROJECT_ID = <your project id>
REACT_APP_FIREBASE_STORAGE_BUCKET = <your storage bucket>
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = <your messaging sender id>
REACT_APP_FIREBASE_APP_ID = <your app id>
REACT_APP_FIREBASE_MEASUREMENT_ID = <your measurement id>

어댑터 폴더에 "firebase.js"라는 파일을 만들고이 파일의 내용은 다음과 같습니다.

import firebase from 'firebase';
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};
const myApp = firebase.initializeApp(firebaseConfig);
export const auth = myApp.auth();

먼저 설치 한 firebase 패키지를 가져 왔습니다.

다음으로 모든 Firebase 구성 세부 정보를 포함하는 개체를 만들었습니다.이 개체는 Firebase 대시 보드에서 복사 한 것과 비슷하지만 여기서 차이점은 환경 변수를 사용한다는 것입니다.

다음으로 구성 설정을 사용하여 애플리케이션을 초기화하는 myApp 변수가 있습니다.이를 사용하여 애플리케이션에 통합하려는 firebase의 다양한 기능 인스턴스를 생성합니다. 따라서 우리는 firebase 인증 기능을 사용하기를 원하므로 firebase auth 메소드의 인스턴스를 만들어야합니다.

마지막으로 인증 인스턴스를 auth라는 변수로 만들고 내 보냅니다.

React의 Context API를 사용할 것이므로 전체 애플리케이션에서 사용자 객체에 액세스 할 수 있습니다. react context API를 사용하는 방법을 모르는 경우 여기에 react context API를 사용하는 방법을 설명하는 블로그 게시물 이 있습니다.

컨텍스트 폴더에“AuthContext.js”라는 파일을 생성합니다. 파일 내용은 다음과 같습니다.

import { useContext, useState, useEffect, createContext } from 'react';
import { auth } from '../adapters/firebase';
const AuthContext = createContext();
export function useAuth() {
  return useContext(AuthContext);
}
export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);
const signup = (email, password, fullName) => {
    let promise = new Promise(function (resolve, reject) {
      auth
        .createUserWithEmailAndPassword(email, password)
        .then((ref) => {
          ref.user.updateProfile({
            displayName: fullName,
          });
          resolve(ref);
        })
        .catch((error) => reject(error));
    });
    return promise;
  };
  const signin = (email, password) => {
    let promise = new Promise(function (resolve, reject) {
      auth
        .signInWithEmailAndPassword(email, password)
        .then((ref) => {
          resolve(ref);
        })
        .catch((error) => {
          reject(error);
        });
    });
    return promise;
  };
  const signout = () => {
    return auth.signOut();
  };
  const passwordReset = (email) => {
    let promise = new Promise(function (resolve, reject) {
      auth
        .sendPasswordResetEmail(email)
        .then(() => {
          resolve(`Password Reset Email sent to ${email}`);
        })
        .catch((error) => {
          reject(error);
        });
    });
    return promise;
  };
useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });
    return unsubscribe;
  }, [currentUser]);
const value = {
    currentUser,
    signup,
    signin,
    signout,
    passwordReset
};
  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
}

먼저, 컨텍스트를 생성하기 위해 react에서 필요한 후크를 가져옵니다.

다음으로 생성 한 firebase 파일에서 인증 인스턴스를 가져옵니다.

그런 다음 "createContext"후크를 사용하여 컨텍스트를 만들고 "AuthContext"라고합니다.

다음으로 "AuthContext"가 인수로 전달 된 "useContext"를 반환하는 "useAuth"라는 함수를 만듭니다.이 함수는이 컨텍스트의 값에 액세스하는 데 사용할 함수입니다.

그런 다음 "AuthProvider"라는 구성 요소를 만들고 "자식"을 소품으로 사용합니다. 이러한 자식은이 컨텍스트를 사용할 응용 프로그램의 다양한 구성 요소가됩니다.

다음으로 인증 된 사용자를 저장하는 데 사용할 "currentUser"상태를 만듭니다. 또한 인증 된 사용자를 가져 오는 동안 로더를 표시하기 위해 나중에 사용할로드 상태도 있습니다.

이제 새 사용자 등록을 담당하는 함수에 대해이 함수는 "email", "password"및 "fullName"을 인수로 사용합니다. 이는 새 사용자를 등록 할 값이기 때문입니다.

다음으로 새로운 Promise 객체를 생성합니다.

내가 Promise를 선택한 이유는이 함수를 호출 할 때마다 반환되는 모든 항목에 쉽게 액세스 할 수 있기 때문입니다.

promise 객체 내에서 'createUserWithEmailAndPassword'메소드가있는 firebase 파일에서 인증 인스턴스를 호출합니다. 이는 이메일과 비밀번호를 인수로 사용하여 firebase에 새 사용자 객체를 생성합니다. 성공하면 사용자 인스턴스에 대한 참조와 함께 promise를 반환합니다. ".then"블록에서이 참조를 가져와 "updateProfile"메소드가있는이 참조의 사용자 객체를 호출합니다. 이것은 객체를 인수로 취합니다. 이제 "updateProfile"은 사용자 개체의 "displayName"및 "photoURL"속성을 업데이트하는 데만 사용되지만 "displayName"만 업데이트하는 것이므로 인수로 전달해야합니다. 이제 Promise 객체는 사용자가 성공적으로 생성 된 경우 사용자의 참조를 반환하고 작업이 실패한 경우 오류를 반환합니다.

다음 기능은 사용자를 로그인하는 것입니다.이 기능은 가입 기능과 동일한 패턴을 따릅니다.이 기능은 "이메일"과 "비밀번호"를 사용하고 인증 인스턴스와 "signInWithEmailAndPasword"를 호출하는 새 promise 객체를 만듭니다. 이 메서드는 이메일과 암호를 인수로 사용하고 성공하면 사용자 참조를 반환하고 작업이 실패하면 오류를 반환합니다.

다음으로 인증 인스턴스에서 "signOut"메소드를 호출하는 "signout"기능이 있습니다.

다음 메소드는 "passwordReset"에 대한 것으로, "email"을 인수로 취하고 인증 인스턴스에서 "sendPasswordResetEmail"메소드를 사용합니다. 이 방법은 제공된 이메일 주소로 이메일을 보냅니다.

다음은 "useEffect"후크입니다. 여기서는 "onAuthStateChanged"메서드를 호출합니다.이 메서드는 현재 사용자를 얻기 위해 인증 인스턴스에 관찰자를 설정합니다. 이 사용자는 "currentUser"상태에 할당됩니다.

다음으로,이 컨텍스트를 통해 액세스 할 수있는 모든 값을 노출하는 값 개체가 있습니다. 여기서는 모든 함수와 currentUser를 노출합니다.

다음으로 AuthContext Provider를 반환합니다.이 공급자는 loading이 false 일 때만 자식 구성 요소를 렌더링합니다.

이제이 컨텍스트로 애플리케이션을 래핑해야하므로 "App"구성 요소로 이동하여 먼저 "AuthProvider"를 가져 오겠습니다.

import { AuthProvider } from './contexts/AuthContext'

<AuthProvider>
  <Switch>
    <Route path="/" exact component={Profile} />
    <Route path="/accounts/emailsignup" component={SignUp} />
    <Route path="/accounts/password/reset" component={ResetPassword} />
    <Route path="/accounts/signin" component={SignIn} />
  </Switch>
</AuthProvider>

가입 기능을 추가 할 수 있도록 "SignupForm"구성 요소로 이동하십시오.

먼저 다음을 가져와야합니다.

import { useRef, useState } from 'react';
import { useHistory } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

컴포넌트 내부에서 return 문 앞에 다음이 있습니다.

const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const emailRef = useRef();
const fullNameRef = useRef();
const passwordRef = useRef();
const { signup } = useAuth();
const history = useHistory();

다음으로, 양식의 입력 필드에 해당하는 세 개의 참조가 있습니다.이를 사용하여 해당 입력 필드에 저장된 값을 가져옵니다.

다음 줄에서 "useAuth"메서드를 호출 한 다음 객체 구조화를 사용하여 AuthContext에서 만든 "signup"메서드를 가져옵니다.

마지막으로 히스토리 변수에 할당 된 "useHistory"후크가 있습니다.

이제 기록 변수 바로 아래에 등록을 처리하는 메서드를 만들어 보겠습니다. 다음 함수를 사용합니다.

const handleSignup = (e) => {
  e.preventDefault();
  setError('');
  setLoading(true);
  const email = emailRef.current.value;
  const password = passwordRef.current.value;
  const fullName = fullNameRef.current.value;
  signup(email, password, fullName)
    .then((ref) => {
      setLoading(false);
      history.push('/');
    })
    .catch((err) => {
      setError(err.message);
      setLoading(false);
    });
};

이제이 함수를 양식의 "onSubmit"이벤트 핸들러에 추가하고 다음을 양식 컴포넌트에 소품으로 추가 할 시간입니다.

onSubmit={(e) => handleSignup(e)}

또한 해당 입력 필드에 참조를 추가하고 참조 값을 해당 필드에 소품으로 추가해야합니다.

{/* For Email input field */}
inputRef={emailRef}
{/* For Fullname input field */}
inputRef={fullNameRef}
{/* For Password input field */}
inputRef={passwordRef}

Button 컴포넌트에서 값을 loading으로 설정하고 버튼 유형을 다음과 같이 "submit"으로 설정하여 "disabled"prop을 전달해야합니다.

disabled={loading}
type="submit"

{error && <AuthError>{error}</AuthError>}

가입 양식은 여기까지입니다. 사용해 볼 시간입니다. 서버가 실행 중인지 확인하고 브라우저의 가입 페이지로 이동합니다.

가입 페이지가 작동하면 로그인 페이지에서 작업 할 시간입니다. 로그인 페이지는 가입 ​​페이지와 동일한 패턴을 따르므로 바로 시작하겠습니다.

"SigninForm"컴포넌트로 가서 react에서 "useState", "useRef"를 가져오고 react-router-dom에서 "useHistory"를 가져오고 AuthContext에서 "useAuth"도 가져옵니다.

다음으로 "로드 중"상태와 "오류"상태가 필요합니다. 또한“email”및“password”에 대한 참조와 useHistory 후크를 사용하는“history”변수를 갖게됩니다. 마지막으로 AuthContext에서 "로그인"메소드를 얻습니다.

다음으로“handleSignin”기능이 있으며, 기능 내용은 다음과 같습니다.

const handleSignin = (e) => {
  e.preventDefault();
  setError('');
  setLoading(true);
  const email = emailRef.current.value;
  const password = passwordRef.current.value;
  signin(email, password)
    .then((ref) => {
      setLoading(false);
      history.push('/');
    })
    .catch((error) => {
      setError(error.message);
      setLoading(false);
    });
};

이제 다음과 같이 양식에 "onSubmit"이벤트 핸들러를 추가해야합니다.

onSubmit={(e) => handleSignin(e)}

마지막으로 아래에 오류 메시지가 있습니다.

이제 브라우저로 이동하여 로그인 페이지를 시도해 보겠습니다.

이제 가입 및 로그인 페이지가 작동하므로 비밀번호 재설정 페이지를 작업 할 차례입니다. 비밀번호 재설정 페이지는 가입 ​​및 로그인 페이지와 동일한 패턴을 따릅니다.

먼저 "useState", "useRef"및 "useAuth"를 가져옵니다.

함수 내에서 세 가지 상태로 작업 할 것입니다. 오류 상태,로드 상태 및 재설정 이메일이 성공적으로 전송되었을 때 성공 메시지를 표시하는 메시지 상태가 있습니다. 또한 "useAuth"에서 passwordReset을 가져 와서 이메일 입력 필드에 대해 "useRef"를 사용하여 참조를 만들어야합니다.

다음으로 다음과 같이 비밀번호 재설정을 처리하는 기능이 있습니다.

const handlePasswordReset = (e) => {
  e.preventDefault();
  setLoading(true);
  setError('');
  setMessage('');
  const email = emailRef.current.value;
  passwordReset(email)
    .then((msg) => {
      setMessage(msg);
      setLoading(false);
    })
    .catch((error) => {
      setError(error.message);
      setLoading(false);
    });
};

이제 다음과 같이 양식의 onSubmit 핸들러에 위 함수를 추가해야합니다.

onSubmit={(e) => handlePasswordReset(e)}

마지막으로 버튼 아래에 다음과 같이 오류 메시지와 메시지를 포함해야합니다.

{error && <AuthError>{error}</AuthError>}
{message && <AuthSuccess>{message}</AuthSuccess>}

거의 완료되었으며 구현할 기능이 하나 더 남았습니다. 로그 아웃 기능,

로그 아웃 기능은 다른 것보다 훨씬 덜 복잡합니다. 여기서 필요한 것은 AuthContext의 로그 아웃 기능뿐입니다.

따라서 먼저 헤더 구성 요소 (또는 로그 아웃 / 로그 아웃 링크가있는 위치)로 이동하여 다음과 같이 useAuth를 가져옵니다.

import { useAuth } from '../contexts/AuthContext';

"useHistory"후크에 할당 된 히스토리 변수를 생성하고 useAuth에서 로그 아웃 기능을 해체하는 것을 잊지 마십시오. 다음으로 로그 아웃을 처리하는 기능이 필요하며 기능은 다음과 같습니다.

const handleSignout = () => {
  signout();
  setShowDrawer((prev) => !prev);  
  history.push('/accounts/signin');
};

그리고 그게 다입니다. 시도해 보겠습니다. 아직 로그인 한 사용자가없는 경우 사용자로 로그인하고 헤더의 프로필 아이콘을 클릭하고 "로그 아웃"을 클릭합니다. 그러면 로그인 한 사용자가 로그 아웃되고 로그인 페이지로 리디렉션됩니다.

마지막으로 프로필 페이지에 대한 권한을 부여하여 인증 된 사용자 만 볼 수 있도록하겠습니다.

이를 위해 먼저 프로필 페이지로 이동 한 다음 다음과 같이 react-router-dom에서 Redirect 구성 요소를 가져옵니다.

import { Redirect } from 'react-router-dom';

import { useAuth } from '../contexts/AuthContext';

<>
  {currentUser ? (
    <ProfileContainer>
      <Header />
      <ProfileBanner />
      <ProfilePost />
      </ProfileContainer>
  ) : (
    <Redirect to="/accounts/signin" />
  )}
</>

이제 firebase를 사용하여 반응하는 기능적 사용자 인증 시스템이 있습니다.

완전한 코드는 여기 에서 찾을 수 있습니다 .

Suggested posts

닷지 종속성이있는 React 앱 인수

닷지 종속성이있는 React 앱 인수

나는 당신이 선택한 React 코드베이스에서 두 가지 일을 할 것을 감히한다. 나는 게임 데이를 위해이 기초적인 악성 코드를 만들었다. 매월 Okra Solar의 개발 팀원 중 한 명이 문제가 발생할 경우 발생하는 상황에 대비하여 나머지 팀원이 준비 할 수 있도록 연습을 진행합니다.

React 및 Socket.io로 실시간 애플리케이션 빌드

React 및 Socket.io로 실시간 애플리케이션 빌드

React 및 Node.js를 사용하여 새로운 애플리케이션을 생성하려면 실제로 최종 솔루션 작업을 시작하기 전에 항상 일정량의 작업이 필요합니다.