1. Auth0のアカウントを作成
下記のURLにアクセスしてアカウントを登録します。
2. ログインしてデフォルトの言語を日本語にする
デフォルトの言語をJapanese (ja)にします。
外国人がログインする可能性がある場合は、Englishなども必ず選択してください。
3. アプリケーションの作成
「アプリケーションの作成」のボタンを選択します。
ReactやVueの場合は「シングルページWebアプリケーション」を選択して「作成」をクリックします。
4. Auth0 React SDKをインストール
以下のコマンドを実行して、Auth0 React SDKをインストールします。
npm install @auth0/auth0-react@2.x5. .envファイルを作成してIDとパスを記述する
.env
VITE_AUTH0_DOMAIN=[Auth0のドメイン]
VITE_AUTH0_CLIENT_ID=[Auth0のクライアントID]Auth0のドメインとクライアントIDはアプリケーションの設定から確認できます。
6. Auth0Providerでアプリをラップする
main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Auth0Provider } from '@auth0/auth0-react'
import './index.css'
import App from './App.tsx'
const domain = import.meta.env.VITE_AUTH0_DOMAIN
const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID
if (!domain || !clientId) {
throw new Error('Missing VITE_AUTH0_DOMAIN or VITE_AUTH0_CLIENT_ID')
}
createRoot(document.getElementById('root')!).render(
<StrictMode>
<Auth0Provider
domain={domain}
clientId={clientId}
authorizationParams={{ redirect_uri: window.location.origin }}
cacheLocation="localstorage"
useRefreshTokens
>
<App />
</Auth0Provider>
</StrictMode>,
)7. ログインと新規登録ボタンを追加する
App.tsx
import { useAuth0 } from '@auth0/auth0-react'
import './App.css'
function App() {
const {
isLoading,
isAuthenticated,
error,
loginWithRedirect: login,
logout: auth0Logout,
user,
} = useAuth0()
const handleLogin = () => login()
const handleSignup = () =>
login({ authorizationParams: { screen_hint: 'signup' } })
const logout = () =>
auth0Logout({ logoutParams: { returnTo: window.location.origin } })
return (
<section id="center">
{isLoading ? (
<p role="status">Loading...</p>
) : isAuthenticated ? (
<>
<h2>ユーザー情報</h2>
<pre>{JSON.stringify(user, null, 2)}</pre>
<button type="button" className="counter" onClick={logout}>
ログアウト
</button>
</>
) : (
<>
{error && <p role="alert">Error: {error.message}</p>}
<button type="button" className="counter" onClick={handleLogin}>
ログイン
</button>
<button type="button" className="counter" onClick={handleSignup}>
新規登録
</button>
</>
)}
</section>
)
}
export default App8. 起動するとログインと新規登録ボタンが表示される
デフォルト設定のパスワード構成は変更が必要
デフォルト設定のパスワード構成はパスワードの最小の長さが15文字になっている。
パスワードの最小の長さが15文字なのは少し長いので、最小は12文字に設定して、以下のチェックをオンにして組み合わせの数を増やしたほうが強固になります。
- 大文字が1文字以上
- 小文字が1文字以上
- 数字が1つ以上
- 特殊文字(32種)が1文字以上
これなら12文字でも約4,281垓通りの組み合わせなので、不正アクセスされる可能性が低くなります。
デフォルトだとGoogleアカウントでログインできるようになっていますが、パスキーを使用した方が良いので、データベースの認証方法からパスキーを有効にして、アプリの接続からgoogle-oauth2はオフにしてください。
以上の設定が完了すれば、パスキーを作成可能になります。
