👽

ReactアプリにAuth0導入して認証機能実装してみた

2021/06/23に公開

React

TypeScript

Auth0

tech

初めに

どのアプリ開発においても主要ではないけど大切な機能に「認証」というものがあります。
具体的には、工数はそこまで掛けたくないけど、ユーザーのデータを扱う所なのでセキュリティ面で頭を使わなければいけないといった所でしょうか。
そんな中、認証をセキュアかつ簡単に実装するシステムに「Auth0」というものがあるらしいんですよね（わざとらしい．．．）。
という事で、今回は「Auth0」を使って、認証機能を実装していきます。
流れとしてはログインボタンを押す->認証画面が表示->認証完了後ログアウトボタンを押す。

実装

まずはAuth0に登録します。
以下のリンクから登録が出来るのでみなさんも是非してください。

https://auth0.com/jp

登録が終わったらログインして、以下の記事を参考に諸々設定を行って下さい。

設定が終わり、サイドバーのApplicationsからデフォルトで以下のようにアプリがすでに作成いるのでこちらからdomainとclinetIdを取得します。

ここからはいよいよReactを触っていきます。
手始めに、実装に必要なライブラリをimportしましょう。

yarn add @auth0/auth-react

取得できたdomainとclientIdをAuth0Providerコンポーネントに渡してあげます。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Provider } from 'react-redux';
import { Auth0Provider } from '@auth0/auth0-react';

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      domain="xxxxxxxxx.jp.auth0.com" // 取得したdomainを入れる。
      clientId="xxxxxxxxx"　// 取得したclientIdを入れる。
      redirectUri={window.location.origin} // 今回はhttp://localhost:3000に帰ってくるように設定
    >
        <App />
    </Auth0Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

次に、ログイン、ログアウトを実現するためのボタンをそれぞれ実装していきます。

ログインボタン

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import styled from 'styled-components';

const LoginButton: React.VFC = () => {
  const { loginWithRedirect } = useAuth0();

  return <Button onClick={loginWithRedirect}>ログイン</Button>;
};

const Button = styled.button`
  width: 150px;
  height: 50px;
  border-radius: 25px;
  background-color: #3bcee2;
`;

export default LoginButton;


export default LoginButton;

ログアウトボタン

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import styled from 'styled-components';

const LogoutButton: React.VFC = () => {
  const { logout } = useAuth0();

  return (
    <Button
      onClick={() => {
        logout({ returnTo: window.location.origin });
      }}
    >
      ログアウト
    </Button>
  );
};

export default LogoutButton;

const Button = styled.button`
  width: 150px;
  height: 50px;
  border-radius: 25px;
  background-color: #db5c8d;
`;

仕上げにApp.tsxを以下のように編集して認証出来るか確認してみましょう。
useAuth0から取得したisAuthenticatedで認証されているかどうかを判断します。

import React from 'react';
import styled from 'styled-components';

import { useAuth0 } from '@auth0/auth0-react';
import LogoutButton from './common/patterns/Button/LogoutButton';
import LoginButton from './common/patterns/Button/LoginButton';

const App: React.VFC = () => {
  const { isAuthenticated } = useAuth0();
  return (
    <Content>
      {!isAuthenticated ? (
        <>
          <div>認証前</div>
          <LoginButton />
        </>
      ) : (
        <>
          <div>認証後</div>
          <LogoutButton />
        </>
      )}
    </Content>
  );
};

export default App;

const Content = styled.div`
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

動作確認

ログイン前(ビルドしたばっかり)
ログインを行う(ボタン押下後、上手く実装できていればこの画面が表示されるはず)
ログイン後(うん！上手くいったみたい)

ログアウトボタンを押すとログイン前に戻る事ができました！！

まとめ

Auth0の設定の所は少々、時間がかかるかも知れませんが
実装面に関してはそこまで難しい所はないのかなぁと思いました。
まだまだ、Auth0の使い方に関しては分かっていない所が多いので
そちらに関してはこれからしっかり勉強していけたらなと思います。
みなさんも是非Auth0試してみてはいかがでしょうか？
ではまた！

初めに

実装

動作確認

まとめ

Discussion