Simplify Outline authentication with Logto
Tags: tutorial, beginners, javascript, webdev
Published: 2023-05-24 19:27:51

## Introduction

- [Logto](https://logto.io/) is an effortless identity solution with all the features you need. It supports various sign-in methods, including username, email, phone number, and popular social sign-ins like Google and GitHub.
- [Outline](https://github.com/outline/outline) serves as a knowledge base for growing teams.

The best part is that both Logto and Outline are open-source. In this article, we will demonstrate how to use Logto as an [OpenID Connect](https://openid.net/specs/openid-connect-core-1_0.html) (OIDC) identity provider for Outline.

## Prerequisites

To get started, make sure you have the following:

- A running Logto instance or access to a Logto Cloud account.
- An Outline hosting environment with access to environment variables.

## Configure Logto

If you are self-hosting Logto, refer to the Logto "[Get started](https://docs.logto.io/docs/tutorials/get-started/)" documentation to set up your Logto instance.

Open Logto Console by entering the URL `https://cloud.logto.io/` if you are using Logto Cloud, or the endpoint you have set up for self-hosting.

---

<center>
<a href="http://cloud.logto.io?sign_up=true&utm_source=dev&utm_medium=outline_auth" target="_blank">Open Logto Cloud and effortlessly complete the configuration</a>
</center>

---

Next, navigate to the "Applications" tab and click on "Create Application".

![Applications tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzyvd6iq3la1lz6f2zya.png)

In the modal that appears, choose "Traditional Web" and provide an application name, such as "Outline". Then click on "Create Application”.

![Create application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bv35e7ai1vuta8zlxzzp.png)

You will be directed to a tutorial page in Logto. Click on "Skip" at the top-right corner to proceed to the Application details page.

![Applications details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbba83j22i259u0fyalf.png)

In the "Redirect URIs" section, enter the following value:

```
[your-outline-origin]/auth/oidc.callback
```

For example, if you are hosting Outline on **`http://localhost:3000`**, the value should be:

```
http://localhost:3000/auth/oidc.callback
```

![Save changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xbx7aokyyo0h0hzn2af.png)

Click on the "Save Changes" button at the bottom. Once successful, keep this page open as it will be useful for the Outline configuration.

## Configure Outline

Follow the steps outlined in the [Outline hosting guide](https://docs.getoutline.com/s/hosting/) until you reach the authentication configuration step. Since Outline supports OIDC-compatible authentication providers by default, you can easily find most of the required configuration values on the Logto application details page.

Refer to the following table for the necessary configuration details:

| Outline Environment Variable | Logto Display Name     |
| ---------------------------- | ---------------------- |
| OIDC_CLIENT_ID               | App ID                 |
| OIDC_CLIENT_SECRET           | App Secret             |
| OIDC_AUTH_URI                | Authorization Endpoint |
| OIDC_TOKEN_URI               | Token Endpoint         |
| OIDC_USERINFO_URI            | Userinfo Endpoint      |

Here's another table containing additional variables:

| Outline Environment Variable | Description                    |
| ---------------------------- | ------------------------------ |
| OIDC_USERNAME_CLAIM          | Set to username                |
| OIDC_DISPLAY_NAME            | Optional - customize as needed |
| OIDC_SCOPES                  | Keep default; no need to set   |

## Self-hosted only: Configure email sign-in in Logto

Since Outline requires user email to be provided, you need to configure email sign-in or a social sign-in that provides trustworthy email address, such as Google sign-in.

See [Passwordless sign-in by adding connectors](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors/) to learn more about configuring passwordless sign-in in Logto.

## Checkpoint: Test Logto and Outline integration

Start the Outline instance and access its endpoint. You should see a button in the center labeled "Continue with OpenID Connect"; it can be customized by setting the `OIDC_DISPLAY_NAME` environment variable.

<img alt="Outline sign-in page" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9jllqpeitjli98iychk.png" width="560" />

Click on the button, and you will be directed to the Logto sign-in experience.

<img alt="Logto sign-in experience" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2idj1837d4oyngrhib5g.png" width="560" />

If everything has been configured correctly, once you complete the sign-in or registration process in Logto, you will be redirected back to Outline. You can then see your personal information displayed in the bottom left corner of the page.

![Outline home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfne3r7trc38lwu3ctew.png)

If you encounter any issues during the integration, please don't hesitate to contact us via email at contact@logto.io or [join our Discord server](https://discord.gg/UEPaF3j5e6)!

---

<center><a href="http://cloud.logto.io?sign_up=true&utm_source=dev&utm_medium=outline_auth" target="_blank">Try Logto today</a></center>