Tina Cloud Auth Provider

Table of Contents

Configure the auth provider
Update the Tina Backend

You can use Tina Cloud for authentication and authorization and self-host the content api. If you do not already have account, you can create one at app.tina.io and then create a new project.

Once you have created the project you will need to add the following environment variable:

NEXT_PUBLIC_TINA_CLIENT_ID=***

Configure the auth provider

To enable Tina Cloud for auth, make sure the clientId property is set to the NEXT_PUBLIC_TINA_CLIENT_ID environment variable in your Tina config.

tina/config.{ts,js}

//...
export default defineConfig({
  // Make sure this is set to point to your graphql endpoint
  contentApiUrlOverride: "/api/tina/gql",
  clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID!,
  //...
  admin: {
    auth: {
      useLocalAuth: process.env.TINA_PUBLIC_IS_LOCAL === "true",
    },
  },
})

Update the Tina Backend

First install the @tinacms/auth package:

yarn add @tinacms/auth

Next you can update your Tina Backend to use the TinaCloudBackendAuthProvider class.

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

import { TinaNodeBackend, LocalBackendAuthProvider } from '@tinacms/datalayer'
import { TinaCloudBackendAuthProvider } from '@tinacms/auth'

import databaseClient from '../../../tina/__generated__/databaseClient'

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

const handler = TinaNodeBackend({
  authProvider: isLocal
    ? LocalBackendAuthProvider()
    : TinaCloudBackendAuthProvider(),
  databaseClient,
})

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

Docs

Tina Cloud Auth Provider

Configure the auth provider

Update the Tina Backend

Default (Auth.js) Auth Provider

Clerk Auth Provider