Auth0+Hasura覚書

10/13/2023

覚えてられない覚書

前回の記事@auth0/nextjs-auth0でゲット！アクセストークンと合わせての覚書。

まずhasura cloud側

hasuraのプロジェクトダッシュボード→右上歯車→Env vars→右上New Env var→HASURA_GRAPHQL_JWT_SECRETに生成したJWTを入力

JWTの生成の仕方は→JWT Config

次はAuth0ダッシュボード

dashboard→Applications→myApp(任意の名前)

✅Allowed Callback URLsした？

http://localhost:3000/api/auth/callbackや独自ドメイン/api/auth/callback

✅Allowed Logout URLsした？

http://localhost:3000や独自ドメイン

✅Allowed Web Originsした？

http://localhost:3000や独自ドメイン

✅Refresh Token Rotation→Roationした？（リフレッシュトークン用）

トグルボタンをアクティブに

✅Advanced Setting→Grants Types→Refresh Tokenした？

チェックマークをアクティブに

✅APIs→myAPI→Access Settings→Allow Offiline Accessした？

トグルボタンをアクティブに

✅Settins→API Authorization Settings→Default AudienceにAPIs/myAPIのAPI Audience/Identifierの値をセットした？

APIs/myAPIのAPI AudienceまたはIdentifieをコピペ

✅Actions→Library→Custom→sign in作成

exports.onExecutePostLogin = async (event, api) => {
  const axios = require('axios');

  const userId = event.user.user_id;
  const nickname = event.user.email;
  const admin_secret = 'HASURAのADMIN_SECRET';
  const url = 'HASURAのGRAPHQLのURL';
  const query = `insert_usersのmutation`;
  const variables = { insert_usersのmutationのinputフィールド };

  await axios.post(
    url,
    { query, variables },
    {
      headers: {
        'content-type': 'application/json',
        'x-hasura-admin-secret': admin_secret,
      },
    }
  );
};

左側の立方体マークのDependenciesにAdd Dependencyでaxios@1.5.0を追加

✅Actions→Library→Custom→hasura-jwt-claimsを作成

exports.onExecutePostLogin = async (event, api) => {
  const namespace = 'https://hasura.io/jwt/claims';

  const claim = {
    'x-hasura-default-role': 'user',
    'x-hasura-allowed-roles': ['user'],
    'x-hasura-user-id': event.user.user_id,
  };

  if (api.idToken) {
    api.idToken[namespace] = claim;
  }

  if (api.accessToken) {
    api.accessToken[namespace] = claim;
  }

  api.accessToken.setCustomClaim(namespace, {
    'x-hasura-default-role': 'user',
    'x-hasura-allowed-roles': ['user'],
    'x-hasura-user-id': event.user.user_id,
  });
};

説明

onExecutePostLogin 関数は、ユーザーがログインした後に実行され、ログインイベントのコンテキストと Auth0 API オブジェクトを受け取ります。

namespace と claim 変数は、Hasura GraphQL サーバーとの連携に必要なカスタムクレームの情報を設定しています。

if で、api.idToken と api.accessToken が存在する場合にのみ、カスタムクレームを追加しています。（エラー回避）

api.idToken および api.accessToken オブジェクトに Hasura カスタムクレームを追加します。これにより、トークンに Hasura 関連の情報が含まれるようになります。

最後に、api.accessToken.setCustomClaim メソッドを使用して、Hasura カスタムクレームをアクセストークンに追加。

Auth0+Hasura覚書

まずhasura cloud側

次はAuth0ダッシュボード

以上！