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

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' を指定することで、ユニバーサルログイン画面ではなく、サインアップ画面を表示することが可能です。

以上