Authentication using JWTs

1) Complete the setup guides#

Follow the frontend and backend pre-built UI setup guides to setup SuperTokens.

2) Enable the JWT feature#

NodeJS
GoLang
Python

import SuperTokens from "supertokens-node";
import Session from "supertokens-node/recipe/session";

SuperTokens.init({
    supertokens: {
        connectionURI: "..."
    },
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Session.init({
            jwt: {
                enable: true,
            },
        })
    ]
});

import (
    "github.com/supertokens/supertokens-golang/recipe/session"
    "github.com/supertokens/supertokens-golang/recipe/session/sessmodels"
    "github.com/supertokens/supertokens-golang/supertokens"
)

func main() {
    supertokens.Init(supertokens.TypeInput{
        RecipeList: []supertokens.Recipe{
            session.Init(&sessmodels.TypeInput{
                Jwt: &sessmodels.JWTInputConfig{
                    Enable: true,
                },
            }),
        },
    })
}

from supertokens_python import init, InputAppInfo
from supertokens_python.recipe import session

init(
    app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."),
    framework='...', 
    recipe_list=[
        session.init(
            jwt=session.JWTConfig(
                enable=True,
                # This is an example of a URL that ngrok generates when
                # you expose localhost to the internet
                issuer='https://0d53-2405-201-e-d8bd-587b-3674-124d-4208.ngrok.io/auth'
            )
        )
    ]
)

info

To learn more about using JWTs with SuperTokens refer to this page.

3) Add custom claims to the JWT#

caution

Hasura requires claims to be set in a specific way, read the official documentation to know more.

NodeJS
GoLang
Python

import SuperTokens from "supertokens-node";
import Session from "supertokens-node/recipe/session";

SuperTokens.init({
    supertokens: {
        connectionURI: "...",
    },
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Session.init({
            jwt: {
                enable: true,
            },
            override: {
                functions: function (originalImplementation) {
                    return {
                        ...originalImplementation,
                        createNewSession: async function (input) {
                            input.accessTokenPayload = {
                                ...input.accessTokenPayload,
                                "https://hasura.io/jwt/claims": {
                                    "x-hasura-user-id": input.userId,
                                    "x-hasura-default-role": "user",
                                    "x-hasura-allowed-roles": ["user"],
                                }
                            };

                            return originalImplementation.createNewSession(input);
                        },
                    };
                }
            },
        })
    ]
});

import (
    "net/http"

    "github.com/supertokens/supertokens-golang/recipe/session"
    "github.com/supertokens/supertokens-golang/recipe/session/sessmodels"
    "github.com/supertokens/supertokens-golang/supertokens"
)

func main() {
    supertokens.Init(supertokens.TypeInput{
        RecipeList: []supertokens.Recipe{
            session.Init(&sessmodels.TypeInput{
                Jwt: &sessmodels.JWTInputConfig{
                    Enable: true,
                },
                Override: &sessmodels.OverrideStruct{
                    Functions: func(originalImplementation sessmodels.RecipeInterface) sessmodels.RecipeInterface {

                        originalCreateNewSession := *originalImplementation.CreateNewSession

                        (*originalImplementation.CreateNewSession) = func(req *http.Request, res http.ResponseWriter, userID string, accessTokenPayload, sessionData map[string]interface{}, userContext supertokens.UserContext) (sessmodels.SessionContainer, error) {
                            if accessTokenPayload == nil {
                                accessTokenPayload = map[string]interface{}{}
                            }

                            hasuraClaims := map[string]interface{}{
                                "x-hasura-user-id":       userID,
                                "x-hasura-default-role":  "user",
                                "x-hasura-allowed-roles": []string{"user"},
                            }

                            accessTokenPayload["https://hasura.io/jwt/claims"] = hasuraClaims

                            return originalCreateNewSession(req, res, userID, accessTokenPayload, sessionData, userContext)
                        }

                        return originalImplementation
                    },
                },
            }),
        },
    })
}

from supertokens_python import init, InputAppInfo
from supertokens_python.recipe import session
from supertokens_python.recipe.session.interfaces import RecipeInterface
from typing import Dict, Union, Any

def override_functions(original_implementation: RecipeInterface):
    original_implementation_create_new_session = original_implementation.create_new_session

    async def create_new_session(request: Any, user_id: str,
                                 access_token_payload: Union[None, Dict[str, Any]],
                                 session_data: Union[None, Dict[str, Any]], user_context: Dict[str, Any]):

        if access_token_payload is None:
            access_token_payload = {}

        access_token_payload['https://hasura.io/jwt/claims'] = {
            "x-hasura-user-id": user_id,
            "x-hasura-default-role":  'user',
            "x-hasura-allowed-roles": ['user'],
        }

        return await original_implementation_create_new_session(request, user_id, access_token_payload, session_data, user_context)

    original_implementation.create_new_session = create_new_session
    return original_implementation

init(
    app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."),
    framework='...', 
    recipe_list=[
        session.init(
            jwt=session.JWTConfig(enable=True),
            override=session.InputOverrideConfig(
                functions=override_functions
            )
        )
    ]
)

4) Configure Hasura environment variables#

info

Read the official documentation to know about setting the JWT secret environment variable on Hasura

To use JWT based authentication, Hasura requires setting environment variables when configuring your app. With SuperTokens this can be done in 2 ways:

Using the JWKS endpoint#

When configuring Hasura, you can set the jwk_url property.

{
    "jwk_url": "{apiDomain}/{apiBasePath}/jwt/jwks.json"
}

You can get the jwks URL for your backend by using the method explained here

Using a key string#

Hasura let's you provide a PEM string in the configuration. Refer to this page to know how to get a public key as a string, you can then use that key string in the Hasura config:

{
    "type": "RS256",
    "key": "CERTIFICATE_STRING",
}

5) Making requests to Hasura#

a) Getting the JWT on the frontend#

Refer to this page to know how to read the JWT

b) Making HTTP requests#

import axios from "axios";

async function makeRequest() {
  let url = "...";
  let jwt = "..."; // Refer to step 5.a
  let response = await axios.get(url, {
    headers: {
      "Authorization": `Bearer ${jwt}`,
    },
  });
}

During Local development#

If you are using Hasura cloud and testing your backend APIs in your local environment, JWT verification will fail because Hasura will not be able to query the JWKS endpoint (because the cloud can not query your local environment i.e localhost, 127.0.0.1).

To solve this problem you will need to expose your locally hosted backend APIs to the internet. For example you can use ngrok:

Configure Hasura to use the {ngrokURL}/{apiBasePath}/jwt/jwks.json as the JWKS endpoint (explained in step 4)
Configure SuperTokens to use {ngrokURL}/{apiBasePath} as the custom issuer URL (refer to this page to know more)