AngularでAuth0のライブラリを使う際のオプションについて

2024年12月04日水曜日 09時00分

AngularでAuth0を使うことがありましたので、自分用のメモとして、残しておきます。

環境

teruhiro:~ $ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 19.0.2
Node: 22.7.0
Package Manager: npm 10.9.1
OS: darwin arm64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1900.2 (cli-only)
@angular-devkit/core         19.0.2 (cli-only)
@angular-devkit/schematics   19.0.2 (cli-only)
@schematics/angular          19.0.2 (cli-only)

AngularでAuth0のライブラリを使う

以下の公式のドキュメントのサンプルを少しお借りします。

Auth0 Angular SDK Quickstarts: Login

provideAuth0()を追加する

以下のように、app.config.tsにprovideAuth0()を追加します。

// app.config.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAuth0 } from '@auth0/auth0-angular';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAuth0(<AuthConfig>{
      domain: 'xxx.jp.auth0.com',
      clientId: 'your-client-id',
      authorizationParams: {
        redirect_uri: 'http://localhost:4200/auth/auth0/callback',
      }
    }),
  ]
});

loginWithRedirect()を追加する

ドキュメントを見ると、以下のコードのように、loginWithRedirect()のオプションがない状態のコードが多いです。

onClickLogin() {
    this.authService.loginWithRedirect().subscribe()
}

上記のredirect_uriのURLにコールバックすることを想定していましたが、実行してみるとhttp://localhost:4200にページが遷移します。

正確には、以下のように遷移しているようです。

ログインボタンをクリックする。
https://xxx.jp.auth0.com/u/login?state=xxxxxに移動する。
ログインする。
http://localhost:4200/auth/auth0/callback?code=xxx&state=xxxに移動する。
spa-jsのhandleRedirectCallback()と同等の処理が実行される。
http://localhost:4200に移動する。

loginWithRedirect()を修正する

以下のようにオプションを指定すると、指定のルートに移動してくれます。

上記の6で、どのルートに移動するかを指定するオプションのようです。

デフォルト値が `/` になっているようです。

onClickLogin() {
    this.authService.loginWithRedirect({
      appState: {
        target: '/private'
      }
    }).subscribe()
}

上記のような挙動のため、コールバック用のURLはhttp://localhost:4200を指定して、ログイン完了後に移動したいルートをオプションで指定すると良いのかもしれません。

コミュニティでAuth0の方が答えていました。

Redirect URI issue after successful login with @auth0/auth0-angular - Auth0 Community

また、Angularではなく、auth0-spa-jsの方は、handleRedirectCallback()を使うのですが、Angularの場合は、クエリパラメータに?state=x&code=xという値がある場合、おそらく、handleRedirectCallback()と同等の処理を実行してくれていると思います。

ためしに、http://localhost:4200/test?code=xxx&state=xxxとすると、http://localhost:4200に移動します。

auth0/auth0-spa-js: Auth0 authentication for Single Page Applications (SPA) with PKCE

//redirect to the Universal Login Page
document.getElementById('login').addEventListener('click', async () => {
  await auth0.loginWithRedirect();
});

//in your callback route (<MY_CALLBACK_URL>)
window.addEventListener('load', async () => {
  const redirectResult = await auth0.handleRedirectCallback();
  //logged in. you can get the user profile like this:
  const user = await auth0.getUser();
  console.log(user);
});