Self-hosted Auth Provider Overview

Loading last updated info...

On This Page

The term "Auth Provider" refers to the TinaCMS component that handles authentication and authorization of users when self-hosting.

The recommended auth provider for TinaCMS is based on Auth.js. It leverages a user collection in your database to store user information and uses the Auth.js api to handle authentication and authorization. By leveraging Auth.js, you can also easily add support for any Auth.js Login Provider such as Auth0, GitHub, Google, etc.

The auth provider is configured in two places when self-hosting:

The TinaCMS Config
The TinaCMS Backend

1. TinaCMS Config (tina/config.ts,tsx,js)

This is done by providing an Auth Provider to the authProvider option in defineConfig.

Example:

import { UsernamePasswordAuthJSProvider } from 'tinacms-authjs/dist/tinacms'
import { LocalAuthProvider } from 'tinacms'

export default defineConfig({
  authProvider: isLocal
    ? new LocalAuthProvider()
    : new UsernamePasswordAuthJSProvider(),
  //...
})

2. TinaCMS Backend

/api/tina/[...routes].{ts,js}

import { TinaNodeBackend, LocalBackendAuthProvider } from '@tinacms/datalayer'
import { TinaAuthJSOptions, AuthJsBackendAuthProvider } from 'tinacms-authjs'
import databaseClient from '../../../tina/__generated__/databaseClient'

const isLocal = process.env.TINA_PUBLIC_IS_LOCAL === 'true'

const handler = TinaNodeBackend({
  authProvider: isLocal
    ? LocalBackendAuthProvider()
    : AuthJsBackendAuthProvider({
        authOptions: TinaAuthJSOptions({
          databaseClient: databaseClient,
          secret: process.env.NEXTAUTH_SECRET,
        }),
      }),
  databaseClient,
})

export default (req, res) => {
  // Modify the request here if you need to
  return handler(req, res)
}

Pre-Built Auth Providers

Implementing an Auth Provider

See Custom Auth Provider for more information on how to implement your own auth provider.