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. image
  • 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. image

    💡 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. image

    💡 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. image 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. image 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. 👏

Recap

With the effort above, we successfully implemented all the non-skippable things in the intro:

  • A database-schema-driven GraphQL API endpoint
  • An auth and identity service on top of OIDC protocol
  • The complete end-user sign-in flow and auth state management
  • Secured API access based on user identity and roles

Not that hard, right? If you meet any issues, feel free to join the Logto or Hasura discord server to have a live chat with the team.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin