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: 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.

getUser: 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.

getToken: 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>

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

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.

getSessionProvider: 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.

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}