Default (Auth.js) Auth Provider

The default (Auth.js) auth provider uses Auth.js and a user collection to authenticate and authorize users to your TinaCMS instance.

Getting Started

If you have not set up self-hosting yet, we recommend using the init backend command. See the Getting started doc for more information.

To get started you will need to install the following dependencies:

Make sure you have a database adapter setup before continuing.

Update Your TinaCMS Config

We need to add the Auth Provider and a user collection to the tina/config.{ts,js} file.

The TinaUserCollection is a special collection that is used to store user information. This collection will be seeded from thecontent/users/index.json file, but the file will not be updated when the users collection is updated. This prevents sensitive information such as passwords from being written to the Git repository.

Add Seed Data

Create a file called content/users/index.json that contains the initial seed user:

After logging in, you can update the username and password

Update TinaCMS Backend

Update your /api/tina/[...routes].{ts,js} file to use the Auth.js backend.

Testing

Now that you have set up the Auth.js auth provider you can test it out.

Testing Authentication Locally

Add the following to your script to your package.json file.

This will allow you to test the authentication flow locally.

Now you can open your browser and navigate to http://localhost:3000/admin/index.html and you should be redirected to the login page.

Updating Your Password

Once you have logged in, you will be prompted to update your password. This should be done so that the password is not stored in plain text in your repository.

Managing users

To add additional users, navigate to the Users collection in the sidebar to add or edit users. See User Management for more details.

Auth.js supports many different login providers. When self-hosting, it is possible to use any of these providers with some configuration changes. The user collection will still be used for authorization, but the login flow will be handled by the login provider.

As an example, we can configure the Discord OAuth login provider.

Discord OAuth walkthrough

Update Your TinaCMS Config

Here we switch from the UsernamePasswordAuthJSProvider to the DefaultAuthJSProvider. We also redefine the user collection to remove the password field, as it is no longer needed.

Update the seed data

Remove the password field from the seed data.

Note that if you already have users in your database, you will need to remove the password field from them as well.

We'll need to split the backend into a separate endpoint, and share the AuthJS options between the two. So in /pages/api/tina/[...routes].{ts,js} we'll have:

Here we specify the DiscordProvider. Also, note that we have added a uidProp to the options. This is used to tell TinaCMS which property on the Discord auth object has the unique identifier for the user. If you are not sure what this should be, you can enable debug mode to see the auth object.

Next, we'll need to create a separate endpoint for the backend. In /pages/api/auth/[...nextauth].{ts,js} we'll have:

Note that this is importing the NextAuthOptions from the other endpoint.

Configure the Discord OAuth Application

To configure the Discord OAuth application, you will need to create a new application in the Discord Developer Portal.

Once the application has been created, go to the OAuth2 tab and copy the Client ID and Client Secret. These will be used as environment variables. Add redirects for localhost http://localhost:3000/api/auth/callback/discord and your production domain.

Add the following environment variables:

Run yarn dev:prod to test login locally.

Getting Started

Update Your TinaCMS Config

Add Seed Data

Update TinaCMS Backend

Testing

Testing Authentication Locally

Updating Your Password

Managing users

Configuring other Auth.js Login Providers