Firebase + Reactでログイン④認証の実装

2020年6月10日2021年1月24日

①Firebaseの設定
②Reactプロジェクト作成
③認証のためのユーザ登録の実装
④認証(ログイン・ログアウト)＆ユーザ削除 ← 今ここ

前回の③認証のためのユーザ登録の実装からの続きをしていきます。
ユーザが登録できたと思うので、いよいよログインの実装をしていきます。

ファイルを編集

src/auth/AuthProvider.js

２個所追加場所があります。
コメントにて記入してあります。

import React, { useEffect, useState } from 'react';
import { app } from '../base';

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
	const [currentUser, setCurrentUser] = useState(null);
	// -- const login追加 ここから ----------
	const login = async(email, password, history) => {
		try {
			await app.auth().signInWithEmailAndPassword(email, password);
			history.push('/');
		} catch(e) {
			alert(e);
		}
	};
	// -- ここまで ----------
	const signup = async(email, password, history) => {
		try {
			await app.auth().createUserWithEmailAndPassword(email, password);
			history.push('/');
		} catch(e) {
			alert(e);
		}
	};
	useEffect(() => {
		app.auth().onAuthStateChanged(setCurrentUser);
	}, []);
	return (
		<AuthContext.Provider
			value={{
				login: login, // 追加
				signup: signup,
				currentUser
			}}>
			{children}
		</AuthContext.Provider>
	);
};

src/auth/Login.jsx

import React, { useContext } from 'react';
import { withRouter } from 'react-router';
import { AuthContext } from './AuthProvider';

const Login = ({ history }) => {
	const { login } = useContext(AuthContext);

	const handleSubmit = event => {
		event.preventDefault();
		const { email, password } = event.target.elements;
		login(email.value, password.value, history);
	};
	return (
		<div>
			<h1>ログイン画面</h1>
			<form onSubmit={handleSubmit}>
				<div>
					<span>Email : </span>
					<input name="email" type="email" placeholder="Email" />
				</div>
				<div>
					<span>Password : </span>
					<input name="password" type="password" placeholder="Password" />
				</div>
				<button type="submit">ログイン</button>
			</form>
		</div>
	);
};
export default withRouter(Login);

src/auth/PrivateRoute.js

import React, { useContext } from 'react';
import { Route } from 'react-router-dom';
import { AuthContext } from './AuthProvider';
import Login from './Login';

const PrivateRoute = ({ component: RouteComponent, ...options }) => {
	const { currentUser } = useContext(AuthContext);
	const Component = currentUser ? RouteComponent : Login;
	
	return <Route {...options} component={Component} />;
};
export default PrivateRoute;

src/components/Home.jsx

import React from 'react';
import { app } from '../base';

function Home(props) {
	return (
		<div>
			<h1>ホーム画面</h1>
			<div>ログイン成功！</div><br />
			<button onClick={() => app.auth().currentUser.delete()}>ユーザの削除</button><br />
			<button onClick={() => app.auth().signOut()}>ログアウト</button>
		</div>
	);
};
export default Home;

src/App.js

全部で5行の追加行があります。
※<!– 追加 –>のコメントはエラー出ますので削除してください。

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import {AuthProvider} from './auth/AuthProvider';
import PrivateRoute from './auth/PrivateRoute'; // 追加
import Home from './components/Home'; // 追加
import Login from './auth/Login'; // 追加
import SignUp from './auth/SignUp';

const App = () => {
	return (
		<AuthProvider>
			<Router>
				<div>
					<PrivateRoute exact path="/" component={Home}/><!-- 追加 -->
					<Route exact path="/login" component={Login}/><!-- 追加 -->
					<Route exact path="/signup" component={SignUp}/>
				</div>
			</Router>
		</AuthProvider>
	);
};
export default App;

アプリの実行

アプリをコマンドにて実行しましょう。

yarn start

エラーなく動くとログイン画面が表示されます。

先ほど登録したEmailとPasswordを入力してログインをしてみましょう。

ログインが成功するとホーム画面が表示されます。
ログアウトボタンを押してみましょう。

無事動けば初期画面に戻るはずです。

再度ログインして、削除ボタンも試してみてください。
登録したアカウントが削除されるはずです。

Firebaseでの確認でもいいですし、
再度ログインをしようとしたらログインできないかと思います。

これでFirebase + React でのログインは終了です。

最後まで読んでいただきありがとうございました。