React＋TypeScript＋Firebaseでの認証

はい、仕事決まってしまいまして、触る時間がなくなりました。なので、GoogleサインアップとTwitterサインアップのコードを記すことにします。簡単ですよ。

サンプルはこちら

事前にfirebaseとTwitter　APIの登録を済ませておかなければいけません。まあ、ググってください。一杯ヒットするので、その通りやれば良いでしょう。

では、ソースを

index.html

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8" />

    <title>Google-Twitter認証 App</title>
    
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

firebase.tsx （認証コードで、値は伏せてあります）

/* eslint-disable import/no-anonymous-default-export */
import firebase from "firebase/compat/app";
import { getAuth } from 'firebase/auth'
import { GoogleAuthProvider } from "firebase/auth";
import { TwitterAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "AIzaSyBkYrbMskBCoul0wMKwg2jdaSUxxxxxx",
  authDomain: "helpful-xxxxxxxxxxxxxx.firebaseapp.com",
  projectId: "helpful-xxxxxxxxxxxxxx",
  storageBucket: "helpful-xxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxx",
  appId: "1:xxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxxxx",
}; //this is where your firebase app values you copied will go

const app = firebase.initializeApp(firebaseConfig);
const auth = getAuth(app)
const providerGoogle = new GoogleAuthProvider()
const providerTwitter = new TwitterAuthProvider();

export { auth , providerGoogle, providerTwitter }

App.tsx

import React from 'react';
import Home from './Home';

function App() {
  return (
    <div className="App">
      <h1>firebaseでつくる</h1>
      <Home />
    </div>
  );
}

export default App;

Home.tsx （認証のキモです）

import React from 'react'
import { signInWithPopup} from 'firebase/auth'
import { auth, providerGoogle, providerTwitter} from './firebase'
import { useAuthState } from 'react-firebase-hooks/auth'

function Home():any {
    const [user] = useAuthState(auth)
    return (
        <div>
            {user ? (
                <>
                    <UserInfo />
                    <SignOutButton />
                </>
            ) : (
                <>
                    <SignInButtonGoogle />
                    <SignInButtonTwitter />
                </>
            )}
        </div>
    )
}
export default Home
// Googleサインイン処理
function SignInButtonGoogle() {
    const signInWithGoogle = () => {
        signInWithPopup(auth, providerGoogle)
    }
    return (
        <button onClick={signInWithGoogle}>
        <p>Googleでサインイン</p>
        </button>
    )
}
// サインアウト処理（共通）
function SignOutButton() {
    return (
        <button onClick={() => auth.signOut()}>
            <p>サインアウト</p>
        </button>
    )
}
// サインイン後のユーザー情報表示
function UserInfo() {
    return (
        <>
            <div>
                <img src ={auth.currentUser!.photoURL as string} alt="" />
                <p>{auth.currentUser!.displayName}</p>
            </div>
        </>
    )
}
// Twitterサインイン
function SignInButtonTwitter() {
    const signInWithTwitter = () => {
        signInWithPopup(auth, providerTwitter)
    }
    return(
        <button onClick={signInWithTwitter}>
        <p>Twitterでサインイン</p>
        </button>
    )
}

こんな感じ。cssは当ててないので単純です。

これで、動かないとかだったら問題は設定です。認証コードがまちがってるか、package.jsonがおかしいか。

あ、ローカルで起動は