Firebase + Reactでログイン③ユーザの登録

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

前回の②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 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={{
				signup: signup,
				currentUser
			}}>
			{children}
		</AuthContext.Provider>
	);
};

src/auth/SignUp.jsx

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

const SignUp = ({ history }) => {
	const { signup } = useContext(AuthContext);

	const handleSubmit = event => {
		event.preventDefault();
		const { email, password } = event.target.elements;
		signup(email.value, password.value, history);
	};

	return (
		<>
			<h1>登録画面</h1>
			<form onSubmit={handleSubmit}>
				<div>
					<label>
						Email :
						<input name="email" type="email" placeholder="Email" />
					</label>
				</div>
				<div>
					<label>
						Password :
						<input name="password" type="password" placeholder="Password" />
					</label>
				</div>
				<button type="submit">登録</button>
			</form>
		</>
	);
};

export default withRouter(SignUp);

src/App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { AuthProvider } from './auth/AuthProvider';
import SignUp from './auth/SignUp';

const App = () => {
  return (
      <AuthProvider>
        <Router>
          <div>
            <Route exact path="/signup" component={SignUp} />
          </div>
        </Router>
      </AuthProvider>
  );
};
export default App;

アプリを実行

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

yarn start

無事に動きますとhttp://localhost:3000が開くと思います。

そちらのページはまだ何も設定をしていないので、
真っ白なページが表示されたかと思います。

直接URLに、先ほど作った「signup」
http://localhost:3000/signupと入力しへ移動しましょう。

こちらの画面が出ましたでしょうか。

早速登録してみましょう。

登録の際の注意点があります。
・Emeilは@マークがないと登録を受け付けません。
・Passwordは6文字以上でないと登録が受け付けません。
良かったら試してみてください。

この２点に注意して登録してみたいと思います。
パスワードは覚えやすいよう「Password」としました。

登録ボタンを押します。
無事完了すると初期画面に戻ると思います。

登録の確認

しっかり登録がされたのかをFirebaseの方で確認してみます。

https://console.firebase.google.com/u/1/
login-projectをクリックします。

左側のメニューの人マークのAuthenticationをクリックします。

先ほど登録したアドレスが表示されていたら成功です。

次はこのメールアドレスとパスワードを使って認証処理をしていきたいと思います。
https://kazunaka.com/firebase-react-loginapp-4/