ご依頼を検討されている方

【徹底解説】ReactにFirebase Authentication(ログイン認証)を実装する方法

URLをコピーする
URLをコピーしました!
想定読者

ReactアプリにFirebase Authenticationを導入してログイン機能を実装してみたい。

本記事は上記の方に向けて執筆しています。

おにちゃん

執筆者:Reactアプリに何度もログイン機能を実装している僕が詳しく解説します。

本記事の難易度:
  1. 本記事は特定のファイルを作成し、完成されたコードをいきなり貼り付ける作業だけでログイン機能を実装できます。
  2. 本記事でログイン機能が動いた方は、各ファイルの細かい部分を理解するようにしましょう。

手順通りやったのにコードが動かないことってよくありませんか。Reactのような短期間でアップデートされる言語ではしょっちゅうあります。

そのため、本記事では「5時間かけて手順通り行うのではなく、完成されたコードを貼り付け、動いた段階で細かいことを学ぶ」ことにしましょう。

おにちゃん

最初はアプリを動かす。その後、動かせる段階になったらソースコードの勉強をする。もしくは、自分で0から作るのもありです。

目次

ReactアプリにFireabase Authenticationを導入する手順

ReactアプリにFirebase Authenticationを導入する手順は下記の通りです。

導入手順

  1. 手順1:.envファイルとfirebase.jsを作成する
  2. 手順2:FirebaseのAuthentication設定を行う
  3. 手順3:App.jsファイルを設定しよう
  4. 手順4:AuthContext.jsxを設定する
  5. 手順5:その他ファイルを構築する

今回使用するファイル

  • .env
  • firebase.js
  • App.js
  • AuthContext.jsx
  • Home.jsx
  • Register.jsx
  • Login.jsx

前提条件

  • Reactアプリを作成している
  • Firebaseの初期設定を終えている

Reactアプリを作成していない方は「【React入門】Reactとは?UI構築のためのJSライブラリ」で作成してからこちらの続きをご覧ください。

Firebaseの初期設定を終えていない方は「【React×Firebase入門】」のレベル0:Firebase準備をする項目を終わらせてからこちらの続きをご覧ください。


手順1:.envファイルとfirebase.jsを作成する

手順1は.envファイルとfirebaseを作成していきます。

REACT_APP_FIREBASE_API_KEY="BLayzgna(具体例)"
REACT_APP_FIREBASE_AUTH_DOMAIN="{ProjectID}.firebaseapp.com"
REACT_APP_FIREBASE_PROJECT_ID="{ProjectID(firebaseに掲載)}"
REACT_APP_FIREBASE_STORAGE_BUCKET="{firebaseに掲載}"
REACT_APP_FIREBASE_MESSAGE_SENDER_ID="{firebaseに掲載}"
REACT_APP_FIREBASE_APP_ID="{firebaseに掲載}"

.envファイルに記載する内容はfirebaseのプロジェクト内に記載されているので、その部分をコピペしてきましょう。

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

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_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_SENDER_ID,
};

firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();

firebase.js内には、firebaseを簡単に使えるようにする場所として活用します。

おにちゃん

今回はauthだけですが、firebaseには他にも色々な機能がありますので、それらを活用する際にはこのページをいじっていく必要があります。

npm —save firebase
npm install react-router-dom

ターミナルで上記のコマンドを入力しておきましょう。

おにちゃん

npm -save firebaseではfirebaseの機能をインストールしています。
僕はこれをよく忘れますm(_ _)m

react-router-domはルーティングを作成する際に使われるReactのライブラリです。


手順2:FirebaseのAuthentication設定を行う

Firebaseのページに行き、Authenticationと書かれたメニューをクリックしましょう。

reactアプリにfirebase authenticationを導入する方法
ReactアプリにfirebaseのAuthenticationを導入する

【始める】をクリックしましょう。

reactアプリにfirebaseのauth機能を搭載|メール
firebase Authenticationのメールを有効化する

今回はメールアドレス・パスワードを有効化し、Reactアプリに導入していきましょう。

Firebase Authenticationを有効にする
おにちゃん

有効化しましたら、保存をクリックしましょう。


手順3:App.jsファイルを設定しよう

import Register from './components/Register';
import Home from './components/Home';
import Login from './components/Login';
import { AuthProvider } from './context/AuthContext';
import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <AuthProvider>
      <div style={{ margin: '2em' }}>
        <BrowserRouter>
          <Route exact path="/" component={Home} />
          <Route path="/register" component={Register} />
          <Route path="/login" component={Login} />
        </BrowserRouter>
      </div>
    </AuthProvider>
  );
}

export default App;


手順4:AuthContext.jsxを設定する

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

const AuthContext = createContext();

export function useAuthContext() {
  return useContext(AuthContext);
}

export function AuthProvider({ children }) {
  const [user, setUser] = useState('');
  const [loading, setLoading] = useState(true);

  const value = {
    user,
    loading,
  };

  useEffect(() => {
    const unsubscribed = auth.onAuthStateChanged((user) => {
      setUser(user);
      setLoading(false);
    });
    return () => {
      unsubscribed();
    };
  }, []);

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
}


手順5:その他ファイルを構築する

import { auth } from '../firebase';
import { useAuthContext } from '../context/AuthContext';

const Register = () => {
  const { user } = useAuthContext();
  const handleSubmit = (event) => {
    event.preventDefault();
    const { email, password } = event.target.elements;
    auth.createUserWithEmailAndPassword(email.value, password.value);
  };

  return (
    <div>
      <h1>ユーザ登録 {user.email}</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>メールアドレス</label>
          <input name="email" type="email" placeholder="email" />
        </div>
        <div>
          <label>パスワード</label>
          <input name="password" type="password" placeholder="password" />
        </div>
        <div>
          <button>登録</button>
        </div>
      </form>
    </div>
  );
};

export default Register;
import { auth } from '../firebase';
import { Link } from 'react-router-dom';

const Login = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    const { email, password } = event.target.elements;
    auth.signInWithEmailAndPassword(email.value, password.value);
  };

  return (
    <div>
      <h1>ログイン</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>メールアドレス</label>
          <input name="email" type="email" placeholder="email" />
        </div>
        <div>
          <label>パスワード</label>
          <input name="password" type="password" placeholder="password" />
        </div>
        <div>
          <button>ログイン</button>
        </div>
        <div>
          ユーザ登録は<Link to={'/signup'}>こちら</Link>から
        </div>
      </form>
    </div>
  );
};

export default Login;
import { auth } from '../firebase';
import { useHistory, Redirect } from 'react-router-dom';
import { useAuthContext } from '../context/AuthContext';
const Home = () => {
  const history = useHistory();
  const { user } = useAuthContext();
  const handleLogout = () => {
    auth.signOut();
    history.push('/login');
  };

  if (!user) {
    return <Redirect to="/login" />;
  } else {
    return (
      <div>
        <h1>ホームページ</h1>
        <button onClick={handleLogout}>ログアウト</button>
      </div>
    );
  }
};

export default Home;


まとめ:ReactアプリにFirebaseのAuthenticationを導入する

ここまでで「【徹底解説】ReactにFirebase Authentication(ログイン認証)を実装する方法」の解説は以上です。

本記事を理解でき方は次のステップへと進みましょう。

Reactをもっと学びたい方は下記の記事を参考にしてみてください。

おにちゃん

本記事は以上です。最後までご覧くださりありがとうございました。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる