The recommended auth provider for Tina 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 Tina Config
The Tina Backend

1. Tina 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. Tina 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)
}