2022-08-20 @Gao Sun

https://embed.notionlytics.com/wt/ZXlKd1lXZGxTV1FpT2lJd1ltRmtaR1JpTnpFeE5qSTBZVGxtWWpneE5HRTFZMkU0TTJZNFlqY3dNU0lzSW5kdmNtdHpjR0ZqWlZSeVlXTnJaWEpKWkNJNklrWlhXbHBOVjAxeU0yVTBZV1ZZYkZJd1UybE1JbjA9

Intro

When it comes to a new project, you usually cannot skip several things: APIs, authentication + authorization, identity, and end-user sign-in flow. It used to be hard to kick off these things because there are many concepts and technologies that spread widely: RESTful/GraphQL, web frontend, native client, connect clients with APIs, auth best practices to balance security and user experience, etc.

Also, most of the works are “repeating”. I mean, they are needed and similar for almost every project, with some tweaks.

Sounds scary and tedious? Don’t panic. Today we have open source. With the two open-source projects below, things become not tricky :

• Logto: Helps you build the sign-in, auth, and user identity within minutes.
• Hasura: Blazing fast, instant real-time GraphQL APIs on your DB with fine-grained access control.

In this article, we’ll focus on connecting Logto and Hasura, which enables you to implement authentication, authorization, and GraphQL APIs without friction. Thus you can quickly jump into your business without rocket-science learning.

Get started

Prerequisites

Since both Logto and Hasura have a decent get-started guide, we assume you have read them and have a basic feeling. Access to a running instance of both is needed.

We assume the accessible endpoints are:

• Logto: http://localhost:3001
• Hasura: http://localhost:8080

<aside> ℹ️ If you are using Docker/Docker Compose, for accessing of your machine(host)’s localhost, you can use the Docker magic string host.docker.internal. In this case, the Logto endpoint will be http://host.docker.internal:3001.

</aside>

Also, we assume you have a preferred platform and framework to build the client app, say React or Next.js.

Set up API in Logto

In the left navigation sidebar of your Logto Admin Console, click “API Resources”, and you’ll see the API Resource management page.

Then click the huge “+ Create API Resource” button in the top-right corner. In the opening modal, enter Hasura for API name and https://hasura.api for API identifier.