ReactでGoogleログイン

前提

以前作成した下記記事の環境からスタート

react-google-login

yarn add react-google-login

react-router-dom

yarn add react-router-dom
yarn add -D @types/react-router-dom

※ログインページからサイトトップページに移動したいため、react-router-domを導入

ログインページの作成

src > componentフォルダ > login.tsx

import React from "react";
import { Link } from "react-router-dom";

export const Login = () => {
return (
    <>
    <h1>ログイン画面</h1>
    <Link to="/site">サイトへ</Link>
    </>
);
};

サイトトップページの作成

src > componentフォルダ > siteTop.tsx

import React from "react";
import { Link } from "react-router-dom";

export const SiteTop = () => {
return (
    <>
    <h1>Hello World</h1>
    <Link to="/">ログインへ</Link>
    </>
);
};

app.tsxの編集

app.tsx

import React, { FC } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import { Login } from "./component/login";
import { SiteTop } from "./component/siteTop";

const App: FC = () => {
return (
    <>
    <BrowserRouter>
        <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/site" element={<SiteTop />} />
        </Routes>
    </BrowserRouter>
    </>
);
};

export default App;

• react-router-domを使ってページを分けれるようにしておく
• /でログインページへ
• /siteでサイトトップページへ

ここまでで確認

yarn startを実行し、ブラウザでlocalhost:8111を入力
ログイン画面とサイトへが表示されて、サイトへを押すとHello Worldが表示されればOK！

Googleログインの導入

import React from "react";
import GoogleLogin from "react-google-login";
import { useNavigate } from "react-router-dom";

const CLIENT_ID = "作成したクライアントID";

export const Login = () => {
const navigate = useNavigate();
const success = () => {
    navigate("/site");
};
const error = () => {
    navigate("/");
};
return (
    <div>
    <h1>ログイン画面</h1>
    <GoogleLogin
        clientId={CLIENT_ID}
        buttonText="Googleでログイン"
        onSuccess={success}
        onFailure={error}
        cookiePolicy={"single_host_origin"}
    />
    </div>
);
};

• 確認のために作成したlogin.tsxの<Link>は削除する

※クライアントIDが必要なため、作る必要があります。
Google Cloud Platform => APIとサービス => 認証情報 => 認証情報を作成 => OAuthクライアントID => ウェブアプリケーション => 作成

最後に

1. 実際に作成したクライアントIDを入れる
2. yarn startを実行し、ブラウザでlocalhost:8111を入力

Googleでログインというボタンを押し、ログインが成功、Hello Worldが表示されたらOK！

参考文献