Squid App に Auth0 を追加する

Auth0 authentication service (認証サービス) と統合して、Auth0 token (トークン) を使用し、サービスを保護します。

Squid で Auth0 を使用するには、まず Squid Console で Auth0 の統合を追加してください。手順については Setup guide を参照してください。

クライアントフレームワークを選択:

React

Follow the Auth0 instructions for React using this link

You will need to install the Auth0 React SDK:

npm install @auth0/auth0-react

Initialize the Auth0 provider:

Client code

import { Auth0Provider } from '@auth0/auth0-react';
import { SquidContextProvider } from '@squidcloud/react';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Auth0Provider
    domain="YOUR_AUTH0_DOMAIN"
    clientId="YOUR_AUTH0_CLIENT_ID"
    authorizationParams={{
      redirect_uri: window.location.origin,
      audience: 'auth0-api-id', // Auth0 API (audience) ID used to issue an access token for calls to the backend.
    }}
  >
    <SquidContextProvider
      options={{
        appId: 'YOUR_APP_ID',
        region: 'YOUR_REGION', // example: 'us-east-1.aws'
      }}
    >
      <App />
    </SquidContextProvider>
  </Auth0Provider>
);

Set the user's auth ID token:

Client code

import { useAuth0 } from '@auth0/auth0-react';
import { useSquid } from '@squidcloud/react';

function App() {
  const { isLoading, user, getAccessTokenSilently } = useAuth0();
  const { setAuthProvider } = useSquid();

  useEffect(() => {
    setAuthProvider({
      integrationId: 'auth0_INTEGRATION_ID',
      getToken: () => user && getAccessTokenSilently(),
    });
  }, [user, getAccessTokenSilently, setAuthProvider]);

  if (isLoading) {
    // Render your loading indicator.
    return <span>Loading...</span>;
  }

  // Render your application
}

To make the user's authentication information available to backend functions, pass the Access Token to Squid:

Client code

squid.setAuthProvider({
  getToken: () => 'USER_AUTH_ID_TOKEN',
  integrationId: 'AUTH_INTEGRATION_ID',
});

The following is an example of how to access the authentication information on the backend:

Backend code

@secureCollection('users', 'read')
secureUsersRead(context: QueryContext<User>): boolean {
    const userAuth = this.getUserAuth();
}

Angular

Follow the Auth0 instructions for Angular using this link

You will need to install the Auth0 Angular SDK:

npm install @auth0/auth0-angular

In src/app/app.module.ts add the following snippets:

Client code

import { NgModule } from '@angular/core';
import { AuthModule, AuthService } from '@auth0/auth0-angular';
import { SquidModule } from '@squidcloud/angular';
import { Squid } from '@squidcloud/client';

@NgModule({
  declarations: [
    //...
  ],
  imports: [
    //...
    AuthModule.forRoot({
      domain: 'YOUR_AUTH0_DOMAIN',
      clientId: 'YOUR_AUTH0_CLIENT_ID',
      authorizationParams: {
        redirect_uri: window.location.origin,
      },
    }),
    SquidModule.forRoot({
      appId: 'YOUR_APP_ID',
      region: 'YOUR_REGION', // example: 'us-east-1.aws'
    }),
  ],
  providers: [
    //...
  ],
  //...
})
export class AppModule {
  constructor(squid: Squid, authService: AuthService) {
    squid.setAuthProvider({
      integrationId: 'auth0_INTEGRATION_ID',
      getToken: async (): Promise<string | undefined> => {
        // Wait until the authentication state is resolved by Auth0.
        const user = await firstValueFrom(auth0Service.user$);
        // Try to get an access token without user interaction if there is an active user.
        return user && auth0Service.getAccessTokenSilently();
      },
    });
  }
}