Skip to content
Shadcn Admin Kit Shadcn Admin Kit Shadcn Admin Kit

Security & Auth Providers

Shadcn-Admin-Kit supports both authentication and authorization, allowing you to secure your admin app with your preferred authentication strategy. Since there are many strategies (e.g., OAuth, MFA, passwordless, magic link), shadcn-admin-kit delegates this logic to an authProvider.

This documentation will explain the following concepts:

The authProvider

Section titled “The authProvider”

The authProvider acts as a bridge between shadcn-admin-kit and the authentication backend.

An Auth Provider must implement the following methods:

const authProvider = {
    // Send username and password to the auth server and get back credentials
    async login(params) {/** ... **/},
    // Check if an error from the dataProvider indicates an authentication issue
    async checkError(error) {/** ... **/},
    // Verify that the user's credentials are still valid during navigation
    async checkAuth(params) {/** ... **/},
    // Remove local credentials and notify the auth server of the logout
    async logout() {/** ... **/},
    // Retrieve the user's profile
    async getIdentity() {/** ... **/},
    // (Optional) Check if the user has permission for a specific action on a resource
    async canAccess() {/** ... **/},
};

You can use an existing Auth Provider from the List of Available Auth Providers or create your own.

Setup

Section titled “Setup”

Once you set an <Admin authProvider>, shadcn-admin-kit enables authentication automatically. For example, to use Auth0, you can set up the authProvider like this:

import { BrowserRouter } from 'react-router';
import { Auth0AuthProvider } from 'ra-auth-auth0';
import { Auth0Client } from '@auth0/auth0-spa-js';
import { Admin } from '@/components/admin';


const auth0 = new Auth0Client({
    domain: import.meta.env.VITE_AUTH0_DOMAIN,
    clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
    cacheLocation: 'localstorage',
    authorizationParams: {
        audience: import.meta.env.VITE_AUTH0_AUDIENCE,
    },
});


const authProvider = Auth0AuthProvider(auth0, {
    loginRedirectUri: import.meta.env.VITE_LOGIN_REDIRECT_URL,
    logoutRedirectUri: import.meta.env.VITE_LOGOUT_REDIRECT_URL,
});


const App = () => (
    <BrowserRouter>
        <Admin authProvider={authProvider}>
            ...
        </Admin>
    </BrowserRouter>
);

Now, every page that requires authentication will redirect the user to the login page if they are not authenticated. After successful login, the user will be redirected back to the page they were trying to access.

Check out the Auth Provider Setup documentation for more details about sending credentials to the API, allowing anonymous access to certain pages, handling refresh tokens, and more.

Supported Auth Backends

Section titled “Supported Auth Backends”

The community has built a few open-source Auth Providers that may fit your need:

If you need to use an auth backend that isn’t listed here, you can create your own authProvider by implementing the methods described above. Check out the Writing an Auth Provider guide for more details.

Access Control

Section titled “Access Control”

Once a user is authenticated, your application may need to check if the user has the right to access a specific resource or perform a particular action.

With Access Control, the authProvider is responsible for checking if the user can access a specific resource or perform a particular action. This flexibility allows you to implement various authorization strategies, such as:

  • Role-Based Access Control (RBAC)
  • Attribute-Based Access Control (ABAC)
  • Access Control List (ACL).

Use the authProvider to integrate shadcn-admin-kit with popular authorization solutions like Okta, Casbin, Cerbos, and more.

To use Access Control, the authProvider must implement a canAccess method with the following signature:

type CanAccessParams = {
    action: string;
    resource: string;
    record?: any;
};


async function canAccess(params: CanAccessParams): Promise<boolean>;

React components will use this method to determine if the current user can perform an action (e.g., “read”, “update”, “delete”) on a particular resource (e.g., “posts”, “posts.title”, etc.) and optionally on a specific record (to implement record-level permissions).

For example, let’s assume that the application receives a list of authorized resources on login. The authProvider would look like this:

const authProvider = {
    async login({ username, password }) {
        // ...
        const permissions = await fetchPermissions();
        // permissions look like
        // ['posts', 'comments', 'users']
        localStorage.setItem('permissions', JSON.stringify(permissions));
    },
    async logout() {
        // ...
        localStorage.removeItem('permissions');
    },
    async canAccess({ resource }) {
        const permissions = JSON.parse(localStorage.getItem('permissions'));
        return permissions.some(p => p.resource === resource);
    },
};

canAccess can be asynchronous, so if the authProvider needs to fetch the permissions from a server or refresh a token, it can return a promise.

Tip: Shadcn-admin-kit calls dataProvider.canAccess() before rendering all page components, so if the call is slow, user navigation may be delayed. If you can, fetch user permissions on login and store them locally to keep access control fast.

The page components (<List>, <Create>, <Edit>, and <Show>) have built-in access control. Before rendering them, shadcn-admin-kit calls authProvider.canAccess() with the appropriate action and resource parameters.

<Resource
    name="posts"
    // available if canAccess({ action: 'list', resource: 'posts' }) returns true
    list={PostList}
    // available if canAccess({ action: 'create', resource: 'posts' }) returns true
    create={PostCreate}
    // available if canAccess({ action: 'edit', resource: 'posts' }) returns true
    edit={PostEdit}
    // available if canAccess({ action: 'show', resource: 'posts' }) returns true
    show={PostShow}
/>

If the authProvider doesn’t implement the canAccess method, shadcn-admin-kit assumes the user can access all pages.

To learn more about implementing access control, check out the Access Control Guide.