Decap CMS UI Authentication Components

3.3.0 · active · verified Wed Apr 22

decap-cms-ui-auth is a specialized UI library providing the interactive authentication components for Decap CMS, an open-source content management system. Currently at version 3.3.0, it is an actively maintained package within the broader Decap CMS project, which follows a frequent release cadence, often seeing multiple patch and minor updates within weeks. This package is distinct from `decap-cms-lib-auth`, which handles the underlying authentication logic; `decap-cms-ui-auth` focuses solely on rendering the user interface for login, logout, and related authentication flows. It leverages React and Emotion for its component architecture and styling, ensuring a consistent look and feel with other Decap CMS UI elements. Its key differentiator is its tight integration with the Decap CMS ecosystem, making it the canonical choice for building custom Decap CMS admin interfaces that require authentication.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to render the `AuthPage` component, illustrating its basic props for an `authenticator` instance and callback handlers for login success and errors. It uses a mock authenticator for standalone demonstration.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthPage } from 'decap-cms-ui-auth';
// In a real application, you would initialize 'authenticator' from 'decap-cms-lib-auth'.
// For this quickstart, we'll use a mock object.

// Mock authenticator - in production, replace with a properly initialized instance from 'decap-cms-lib-auth'
const mockAuthenticator = {
  authenticate: async (credentials) => {
    console.log('Attempting authentication with:', credentials);
    return { token: 'mock-token', user: { name: 'Mock User' } };
  },
  clear: () => console.log('Authenticator cleared'),
  retrieve: async () => ({ token: 'mock-token', user: { name: 'Mock User' } }),
  // Add other methods expected by AuthPage (e.g., 'authProviders')
  authProviders: [], // No providers for this mock
};

function MyAuthApp() {
  const handleLoginSuccess = (user) => {
    console.log('Login successful!', user);
    alert(`Welcome, ${user.name}!`);
    // Typically, you'd redirect to the CMS dashboard here
  };

  const handleLoginError = (error) => {
    console.error('Login error:', error.message);
    alert(`Login failed: ${error.message}`);
  };

  return (
    <div style={{ fontFamily: 'sans-serif', textAlign: 'center', marginTop: '50px' }}>
      <h1>Welcome to Decap CMS</h1>
      <p>Please log in to manage your content.</p>
      <div style={{
        maxWidth: '400px', margin: '20px auto', padding: '20px',
        border: '1px solid #eee', borderRadius: '8px',
        boxShadow: '0 2px 10px rgba(0,0,0,0.05)'
      }}>
        <AuthPage
          authenticator={mockAuthenticator}
          onLogin={handleLoginSuccess}
          onError={handleLoginError}
          inProgress={false} // Set to true during an active login attempt
          config={{ backend: { name: 'git-gateway' } }} // Minimal config prop, AuthPage might inspect it
          logoURL="https://decapcms.org/img/decap-logo.svg" // Optional: path to your CMS logo
        />
      </div>
    </div>
  );
}

// To run this example:
// Ensure you have a 'root' div in your HTML file (e.g., <div id="root"></div>)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyAuthApp />);

view raw JSON →