React (Gatsby)でAuth0を使ったログイン

そろそろ扱えたほうがいい気がしてきたので、触ってみました。準備 Create React Appがちょいちょい地雷を踏むので、Gatsbyでセットアップしておきます。ライブラリの追加 auth0-jsがSDKの様子な […]

そろそろ扱えたほうがいい気がしてきたので、触ってみました。

Table of Contents

準備

Create React Appがちょいちょい地雷を踏むので、Gatsbyでセットアップしておきます。

$ npx gatsby new auth0-react
$ cd auth0-react

ライブラリの追加

auth0-jsがSDKの様子なので入れましょう。

$ npm i -S auth0-js

接続情報の取得

Auth0のダッシュボードからクライアントIDなどを拾います。

１ファイルにまとめる

チュートリアルにあるコードをそのまま使います。

import auth0 from 'auth0-js';

class Auth {
  constructor() {
    this.auth0 = new auth0.WebAuth({
      // the following three lines MUST be updated
      domain: 'xxxxx.auth0.com',
      clientID: 'xxxxxxxxx',
      redirectUri: 'https://localhost:8000/callback',
      responseType: 'id_token',
      scope: 'openid profile'
    });

    this.getProfile = this.getProfile.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);
    this.isAuthenticated = this.isAuthenticated.bind(this);
    this.signIn = this.signIn.bind(this);
    this.signOut = this.signOut.bind(this);
  }

  getProfile() {
    return this.profile;
  }

  getIdToken() {
    return this.idToken;
  }

  isAuthenticated() {
    return new Date().getTime() < this.expiresAt;
  }

  signIn() {
    this.auth0.authorize();
  }

  handleAuthentication() {
    return new Promise((resolve, reject) => {
      this.auth0.parseHash((err, authResult) => {
        if (err) return reject(err);
        if (!authResult || !authResult.idToken) {
          return reject(err);
        }
        this.idToken = authResult.idToken;
        this.profile = authResult.idTokenPayload;
        // set the time that the id token will expire at
        this.expiresAt = authResult.idTokenPayload.exp * 1000;
        resolve();
      });
    })
  }

  signOut() {
    // clear id token, profile, and expiration
    this.idToken = null;
    this.profile = null;
    this.expiresAt = null;
  }
}

const auth0Client = new Auth();

export default auth0Client;

コールバックURLの設定を忘れずに

だいたいここでコールバックURLの許可を忘れてエラーになるので気をつけてください。

エラーが出たらログを見る

だいたいDashboardからログが見れます。

React（Gatsby）のコードに埋め込む

先程のAuth.jsファイルをReactから使うイメージとなります。

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import auth0Client from '../Auth';

const UserActionButton = () => {
  let isAuthenticated = auth0Client.isAuthenticated()
  const signOut = () => {
    auth0Client.signOut()
    isAuthenticated = auth0Client.isAuthenticated()
  }
  if (isAuthenticated) return <button className="btn btn-dark" onClick={signOut}>Sign out</button>
  return <button className="btn btn-dark" onClick={auth0Client.signIn}>Sign In</button>
}

const IndexPage = () => {
  return (
    <Layout>
      <SEO title="Home" />
      <h1>Hi people</h1>
      <UserActionButton />
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
      
      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <Image />
      </div>
      <Link to="/page-2/">Go to page 2</Link>
    </Layout>
  )
}

export default IndexPage

これでデフォルトページにログインボタンを出すようにできました。

Auth0からのコールバックページを作る

Auth0での認証では、一旦Auth0のページにアクセスした後にコールバックURLへ遷移するというステップをとります。そのためコールバック先のページをsrc/pages/callback.jsとして作る必要があります。

import React from "react"
import { navigate} from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"
import auth0Client from '../Auth';

export default class Auth0CallBack extends React.Component {
  async componentDidMount() {
    await auth0Client.handleAuthentication();
    navigate('/');
  }

  render() {
    return (
      <Layout>
        <SEO title="Home" />
        <p>Loading profile...</p>
      </Layout>
    );
  }
}