Logto

What is Logto?

Logto is an open source identity solution that helps you build the sign-in experience and user authentication service within minutes.

How to integrate Logto?

This guide assumes you already have Hasura instance running on your local environment.

Hasura supports two ways of authentication: Webhooks and JWT. In this guide, we are using a webhook to authenticate all incoming requests to the Hasura server. Check Hasura official docs for more information about Webhooks.

Set auth hook endpoint via environment variables:

# Assuming Logto is running at 'http://localhost:3001',
# and we are also going to create an API resource named 'https://hasura.api' in the next few steps
HASURA_GRAPHQL_AUTH_HOOK=http://localhost:3001/api/authn/hasura?resource=https://hasura.api

💡 In case your Hasura instance operates within a docker container, accessing Logto via "localhost:3001" might not be feasible since it's located in another container. Normally, you can substitute 'localhost' with 'host.docker.internal', however, for detailed guidance, refer the official Docker documentation.

Self-host Logto instance on your own server:

Prepare a PostgreSQL instance, and use Logto CLI to seed a database for Logto:

npx @logto/cli db seed

Pull the Logto docker image:

# ghcr
docker pull ghcr.io/logto-io/logto
# DockerHub
docker pull svhd/logto

Run docker container with the following environment variables

docker run \
--name logto \
-p 3001:3001 \
-p 3002:3002 \
-e TRUST_PROXY_HEADER=1 \
-e ENDPOINT=https://your-logto-domain-url \
-e DB_URL=postgres://username:password@your_postgres_url:port/db_name \
svhd/logto

For more details on how to self-host a Logto instance, please check Logto official "Get Started" documentation.

Sign-in to Logto Admin Console

Open browser, and navigates to the Logto domain URL. You will see this welcome page once the above deployment is successful.
Create an admin account, and sign in.

Create Hasura API resource

In order to protect your HASURA GraphQL requests, we are going to create an API resource for HASURA in Logto. Once signed-in to Logto admin console, go to “API Resources” page, and click “Create API Resource” button.
💡 The API resource identifier can be any absolute URI format. In this guide, we use https://hasura.api as the identifier.

Create Role for Hasura

In order to take advantage of Hasura's permission management, we are going to create roles in Logto, those roles will map to Hasura's roles.
💡 The role name must equal to the role name in Hasura's "Premissions" page.

Remember to assign the role to users.

Create Application and Integrate Logto SDK

Go to “Applications” in admin console, and click “Create Application” button. In this guide, let’s assume your application is an SPA built with React framework.
Follow the guide step by step, and integrate Logto React SDK into your application. For now, you are having your user authentication ready and secured by Logto.
💡 Check “Sign-in Experience” in admin console if you want to customize your sign-in page and workflow.
Once you complete the integration above, we need one tiny modification to the code in Step 2: Init LogtoClient. Add the Hasura API identifier in LogtoConfig as resources when initializing LogtoClient.

const config: LogtoConfig = {
  endpoint: 'http://localhost:3001',
  appId: '<your-application-id>',
  resources: ['https://hasura.api'], // Add this line
};

Issue Access Token and Protect Your Hasura API Requests

Finally! We are almost there. In your code, after a user is successfully signed-in, call getAccessToken() in Logto SDK with the above identifier to issue an access token for your Hasura API resource.

const accessToken = await logto.getAccessToken('https://hasura.api');

The access token issued will be a standard JWT format token. Set it to your request header before calling the Hasura GraphQL requests.

// Before sending the request
request.headers.set('Authorization', `Bearer ${accessToken}`);
request.headers.set('Expected-Role', 'user');

Congratulations! For now, you are having not only the ability to generate a valid Access Token for GraphQL requests, but also a smooth sign-in experience for your end-users. 👏