How to use Logto for your Encore application

Encore is a backend development platform that makes it easy to build production-ready APIs and microservices.

Logto is a modern Auth0 alternative that helps you build the sign-in experience and user identity within minutes. It's particularly well-suited for protecting API services built with Encore.

This guide will show you how to integrate Logto with your Encore application to implement secure user authentication and protect your API endpoints.

Logto settings#

Before we begin integrating with Encore, you'll need to set up a few things in Logto:

1. Create an account at Logto Cloud if you don't have one yet.

2. Create an API Resource in Logto Console, this represents your Encore API service

   • Go to "API Resources" in Logto Console and create a new API
   • Set a name and API identifier (e.g., https://api.encoreapp.com)
   • Note down the API identifier on the API resource details page as we'll need it later

3. Create an application for your frontend application

• Go to "Applications" in Logto Console
• Create a new application according to your frontend framework (We use React as an example, but you can create any Single-Page Application (SPA) or native app)
• (Optional, we'll cover this later) Integrate Logto with your frontend application according to the guide in the Logto Console.
• Note down the application ID and issuer URL on the Application details page as we'll need them later

Setup the auth handler for your Encore API service#

Now let's implement the authentication in your Encore application. We'll use Encore's built-in auth handler to validate Logto's JWT tokens.

Add these two modules in your Encore application:

Create auth/auth.go and add the following code:

And then, you can use this auth handler to protect your API endpoints:

Frontend#

We've completed our work in the Encore API service. Now we need to integrate Logto with our frontend application.

You can choose the framework you are using in the Logto Quick start page to integrate Logto with your frontend application. In this guide we use React as an example.

Check out the Add authentication to your React application guide to learn how to integrate Logto with your React application. In this example, you only need to complete up to the Integration section. After that, we'll demonstrate how the frontend application can obtain an access token from Logto to access the Encore API.

First, update your LogtoConfig by adding the API resource used in your Encore app to the resources field. This tells Logto that we will be requesting access tokens for this API resource (Encore API).

After updating the LogtoConfig, if a user is already signed in, they need to sign out and sign in again for the new LogtoConfig settings to take effect.

Once the user is logged in, you can use the getAccessToken method provided by the Logto React SDK to obtain an access token for accessing specific API resources. For example, to access the Encore API, we use https://api.encoreapp.com as the API resource identifier.

Then, add this access token to the request headers as the Authorization field in subsequent requests.

That's it, you've successfully integrated Logto with your Encore application.

Explore more#

If you want to use more Logto features in Encore, you can refer to the following links for more information:

• Combine Logto's Custom token claims to set custom user data in the auth handler
• Use Logto RBAC features to add authorization support to your Encore API service. The React integration tutorial also demonstrates how to add scope information to your Access token (note that you need to sign in again after updating Logto config)
• Build your Multi-tenant application with Encore API service using organization tokens, refer to Build a multi-tenant SaaS application with Logto