IDaasを使う
Auth0をReactで使ってみた!
こちらが公式のページ
Auth0が提供しているIDaasでしたが、現在はOktaという企業に買収されているようです。
簡単にカッコイイログイン画面と多要素認証を導入できるサービスです。
IDassとは何か?
Identity as a Serviceの略で、クラウドで、IDパスワード管理、アクセス制御を管理できるサービス。
わかりやすくいうと、クラウドが提供している認証・認可の機能を提供するサービス。
まずは、会員登録をしてチュートリアルを始めます。英語で分かりにくいですが、翻訳機能を使えばどれを選択して次の手続きを進めればいいのかわかるので、難しくはなかったのですが、以前なぜか新規登録ができないことがあった?
今回作成したサンプルアプリの完成品
公式チュートリアルには、.envの設定がなかったのですが、見えたらまずいなと思うdomainやクライアントIDを隠したかったので、環境変数の設定をしました。
忘れないようにスクリーンショットを撮って起きました
新規作成をして、Auth0をReactで使ってみます。マニュアルがあったのでこちらの手順に従えば私でもできました。
左のサイドメニューからApplicationsを選択して、Create Applicationを選択する
Create Applicationのボタンを押す
左から２番目項目を選択してCREATEのボタンを押す
Reactのアイコンを選択すると、ReactアプリでAuth0に必要な設定方法が表示されます。
TabBarでSettingsを選択する
main.jsxで使用するこちらのドメインとクライアントIDをコピーしておく
下の方にURLを設定
- Viteはlocalhost:3000ではないので注意!
- http://127.0.0.1:5173/にする
- YouTubeでやってみたのは、4040だった?
Auth0をReactで使う
公式チュートリアルを参考に進めた
今回はViteを使用しているので、create react appとは設定の仕方が違って、
ハマった!
通常のcreate react appだとhttp://localhost:3000で設定できる!
http://は、Viteのhttpを指定する
# こちらを指定する
http://127.0.0.1:5173/
こちらのコマンドでReactプロジェクトを作成する
npm create vite@latest
プロジェクトを作成したら、componentsディレクトリを作成して、認証に必要なコンポーネントを作成する
認証用のコンポーネント
- ログインボタン
- ログアウトボタン
- プロフィール表示コンポーネント
.envファイルを作成して、環境変数を作成する。Viteだと設定の仕方が違うので、注意が必要!
.envは.gitignoreでGitのコミットの対象から外しておく。
VITE_AUTH0_DOMAIN=********.com
VITE_AUTH0_CLIENT_ID=*********SWMAEj
main.jsxにAuth0の設定をしているコードがありこちらで、ドメインとクライアントIDを使用する。
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { Auth0Provider } from "@auth0/auth0-react";
const domain = import.meta.env.VITE_AUTH0_DOMAIN;
const client = import.meta.env.VITE_AUTH0_CLIENT_ID;
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Auth0Provider
domain={domain}
clientId={client}
redirectUri={window.location.origin}
>
<App />
</Auth0Provider>
</React.StrictMode>
)
componentsディレクトリに作成した認証に使うボタンコンポーネントは、公式のものをそのまま使ってます。
ログインのコンポーネント
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
return <button onClick={() => loginWithRedirect()}>Log In</button>;
};
export default LoginButton;
ログアウトのコンポーネント
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const LogoutButton = () => {
const { logout } = useAuth0();
return (
<button onClick={() => logout({ returnTo: window.location.origin })}>
Log Out
</button>
);
};
export default LogoutButton;
プロフィールを表示するコンポーネント
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const Profile = () => {
const { user, isAuthenticated, isLoading } = useAuth0();
if (isLoading) {
return <div>Loading ...</div>;
}
return (
isAuthenticated && (
<div>
<img src={user.picture} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
)
);
};
export default Profile;
ソースコードを書くのが終わったら、Reactをアプリを起動する。
npm run dev
Sign Upで新規登録をする
ユーザー登録できたらこちらの画面が表示される。
右下のAcceptボタンを押すとログインボタンのページに戻る。
ログイン後の画面
ログイン後の画面
プロフィール画像が表示されるコンポーネントを追加
ログアウト後の画面
最後に
Auth0以前から気になっていて試してみたかったのですが、ついに使ってみました。現代の開発でこのような外部サービスを使ってフロントエンドだけで開発を進めることできるから、すごい時代になったなと思いました😅
Login機能だと、FirebaseやSupabaseでも使える仕組みが提供されているので、Reactで個人開発をするときは、どんどん使っていきたいと思います。
Discussion