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