📚

React * Auth0 でサインアップボタンを作る方法

2021/09/16に公開

signup_with_auth0

この記事について

Reactでauth0(SPAモード)利用時のサインアップボタン作成手順について解説します。

前提

  • React
    • react@17.0.2
  • node
    • v14.17.4
  • yarn
    • 1.22.11
  • auth0
    • @auth0/auth0-react@1.7.0
    • @auth0/auth0-spa-js@1.17.1
    • auth0についてはこちら

要約

useAuth0利用時に、loginWithRedirectのpropertyに screen_hint:"signup" を指定しましょう。

コード例
      <Button
        color="primary"
        style={{ maxWidth: '180px', minWidth: '180px' }}
        variant="contained"
        onClick={() => loginWithRedirect({ screen_hint: 'signup' })}
      >

詳細

背景

Reactでauth0を利用する時、useauth0というモジュールを組み込むと、簡単にログイン機能を実装することができます。
イベントハンドラと、useauth0のloginWithRedirectというコンポーネントを利用することで、サインイン用のボタンを作成することができるのですが、プロパティを指定しなければ、下記のようなユニバーサルログイン画面へ誘導されます。
画像

プロパティに screen_hint:'signup' を指定することで、ユニバーサルログイン画面ではなく、サインアップ画面を表示することが可能です。
画像

以上

Discussion