Custom Auth Provider

To self-host with a custom auth provider, you will need to do the following steps.

1. Create a custom Auth Provider Class

You can do so by extending the AbstractAuthProvider class and implementing the following functions:

Required Functions

authenticate

REQUIRED

This function is called when the user goes into /admin and they are not logged in (determined by getUser). This function should redirect the user to the login page or do whatever is necessary to authenticate the user.

get​User

REQUIRED

This function is called when the user goes into /admin and is used to determine if the user is logged in. If it returns a truthy value, the user is logged in. If it returns a falsy value the user is not logged in.

get​Token

REQUIRED

This function is called when a request is made to the GraphQL endpoint. It should return an object with an id_token property. This will be passed as an Authorization header in the format Bearer <id_token>

log​Out

REQUIRED

This function is called when the user clicks the logout button.

All properties marked as REQUIRED must be specified for the field to work properly.

Optional Functions

authorize

This function is called when the user goes into /admin and is logged in. It is used to determine if the user is authorized to access the admin. If it returns a truthy value, the user is authorized. If it returns a falsy value the user is not authorized.

get​Session​Provider

Return a React context provider that wraps the TinaCMS UI.

Now you can add your custom auth provider to your config file:

2. Add Auth to the TinaCMS Backend

TinaNodeBackend takes an authProvider Prop.

initialize
() => Promise<void>
is​Authorized

REQUIRED

(req: IncomingMessage, res: ServerResponse) => Promise<{ isAuthorized: true } | { isAuthorized: false; errorMessage: string; errorCode: number }>
extra​Routes
{ [key: string]: { secure?: boolean; handler: (req: IncomingMessage, res: ServerResponse) => Promise<void> } }

You can use this if you need to attach any extra routes to the backend. Ex, a callback route for OAuth. If secure is true the isAuthorized function will be called before the handler is called.

All properties marked as REQUIRED must be specified for the field to work properly.

This interface must be passed to the authProvider prop of TinaNodeBackend. You can get the token from the request by calling req.headers.authorization. This token should be validated in the isAuthorized function.

For an example of how to do this, see the Auth.js Backend.

Once you have created an object that implements the BackendAuthProvider interface, you can pass it to the authProvider prop of TinaNodeBackend.

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