ReactとTailwind CSSを使ってFirebaseのWeb認証処理を解説

$ npm install tailwindcss

$ yarn add tailwindcss

$ npm install -D tailwindcss postcss autoprefixer

$  yarn global add tailwindcss postcss autoprefixer

$ yarn add tailwindcss

$ npx tailwindcss init -p

$ yarn tailwindcss init -p

module.exports = {
  // content: [],
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

const Login = () => {
    return (
        <div className="Login">
            <header>
                <h1>ログイン画面</h1>
            </header>
            <main>
                <form action="#" method="POST">
                    <div>
                        <label htmlFor="email">メールアドレス</label>
                        <input id="email" name="email" type="email" autoComplete="email" required/>
                    </div>
                    <div>
                        <label htmlFor="password">パスワード</label>
                        <input id="password" name="password" type="password" autoComplete="current-password" required/>
                    </div>
                    <div>
                        <div>
                            <a href="#">パスワード忘れた方</a>
                        </div>
                    </div>
                    <div>
                        <button type="submit">ログイン</button>
                    </div>
                </form>
            </main>
        </div>
    );
}

export default Login;

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Login from "./Login"; // AppからLoginに変更

ReactDOM.render(
  <React.StrictMode>
    <Login />         // AppからLoginに変更
  </React.StrictMode>,
  document.getElementById('root')
)

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
・・・省略・・・

<button type="submit" className="text-3xl font-bold">ログイン</button>

import './Login.css'

const Login = () => {
    const styleRoot = 'Login container md:3/5 lg:w-3/6 xl:w-2/5 ';
    const styleHeader = 'h-20 flex justify-center items-center text-3xl';
    const styleMain = 'border border-emerald-400 p-5 rounded-md';
    const styleRow = 'p-5 flex flow-root';
    const styleInputLabel = 'block pb-1 text-lg text-emerald-700';
    const styleInput = 'border rounded-md border-emerald-500 w-full p-2 text-lg text-emerald-900';
    const styleBtn = 'p-2 w-full rounded-lg bg-emerald-400 hover:opacity-80 ' +
        'text-teal-50 text-lg hover:border-emerald-500 hover:ring-2 font-black';

    return (
        <div className={styleRoot}>
            <header className={styleHeader}>
                <h1 className="text-center">ログイン画面</h1>
            </header>
            <main className={styleMain}>
                <form action="#" method="POST">
                    <div className={styleRow}>
                        <label htmlFor="email" className={styleInputLabel}>メールアドレス</label>
                        <input id="email" className={styleInput} name="email"
                               type="email" autoComplete="email" required/>
                    </div>
                    <div className={styleRow}>
                        <label htmlFor="password" className={styleInputLabel}>パスワード</label>
                        <input id="password" className={styleInput} name="password"
                               type="password" autoComplete="current-password" required />
                    </div>
                    <div className={styleRow}>
                        <div>
                            <a href="#">パスワードを忘れた方</a>
                        </div>
                    </div>
                    <div className={styleRow}>
                        <button type="submit" className={styleBtn}>ログイン</button>
                    </div>
                </form>
            </main>
        </div>
    );
}

export default Login;

<div className="border rounded-md border-emerald-500 w-full 
           p-2 text-lg text-emerald-900">サンプル</div>

const [forms, setForms] = useState({});

const [forms, setForms] = useState({email: '', password: ''});

const handleEmailChange = e => setForms({...forms, email: e.target.value});
const handlePasswordChange = e => setForms({...forms, password: e.target.value});

<input id="email" className={styleInput} name="email"
      type="email" autoComplete="email" required
      value={forms.email} onChange={handleEmailChange}/>

<input id="password" className={styleInput} name="password"
           type="password" autoComplete="current-password" required
           value={forms.password} onChange={handlePasswordChange}/>

<form action="#" method="POST">

<form onSubmit={clickForms}>

const clickForms = e => {
    console.log('buttonが押されました');
    e.preventDefault();
};

<p>{JSON.stringify(forms)}</p>
<main className={styleMain}>
・・・省略・・・

$ vite

  vite v2.7.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 275ms.

$ npm install firebase --save

$ yarn add firebase

FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_PROJECTID=
FIREBASE_STORAGE=
FIREBASE_MSG_SENDERID=
FIREBASE_API_ID=

// Import the functions you need from the SDKs you need
import firebase from "firebase/compat";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECTID,
    storageBucket: process.env.FIREBASE_STORAGE,
    messagingSenderId: process.env.FIREBASE_MSG_SENDERID,
    appId: process.env.FIREBASE_API_ID
};

// Initialize Firebase
export const auth = firebase.initializeApp(firebaseConfig).auth();

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECTID=
VITE_FIREBASE_STORAGE=
VITE_FIREBASE_MSG_SENDERID=
VITE_FIREBASE_API_ID=

// Import the functions you need from the SDKs you need
import firebase from "firebase/compat";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
    projectId: import.meta.env.VITE_FIREBASE_PROJECTID,
    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE,
    messagingSenderId: import.meta.env.VITE_FIREBASE_MSG_SENDERID,
    appId: import.meta.env.VITE_FIREBASE_API_ID
};

// Initialize Firebase
export const auth = firebase.initializeApp(firebaseConfig).auth();

import {auth} from "./Firebase";

const clickForms = e => {
    e.preventDefault();
    auth.signInWithEmailAndPassword(forms.email, forms.password)
        .then(r => {
            console.log(r);
        }).catch(e => {
            console.log(e);
        });
    console.log('buttonが押されました');
};

FirebaseError: Firebase: There is no user record corresponding to this identifier. The user may have been deleted. (auth/user-not-found).
    at createErrorInternal (assert.ts:122:55)
    at _fail (assert.ts:65:9)
    at _performFetchWithErrorHandling (index.ts:170:9)
    at async _performSignInRequest (index.ts:188:27)
    at async _signInWithCredential (credential.ts:37:20)

エラー FirebaseError: Firebase: The password is invalid or the user does not have a password. (auth/wrong-password).
    at createErrorInternal (assert.ts:122:55)
    at _fail (assert.ts:65:9)
    at _performFetchWithErrorHandling (index.ts:170:9)
    at async _performSignInRequest (index.ts:188:27)
    at async _signInWithCredential (credential.ts:37:20)

$ vite build

$ firebase deploy

$ firebase deploy -m "Firebaseのメールとパスワード認証を追加しました"