@rationalbloks/frontblok-components

MUI views and parts for RationalBloks frontends: sign-in and registration with Google Sign-In, the password reset and email verification pages, settings, support, an error boundary, a confirmation modal, a navbar factory and the theme.

A component gets everything through its props (API client, auth hook, branding, routes) and reads no app context. The API client and auth hook of @rationalbloks/frontblok-auth fit the props as they are.

Install

npm install @rationalbloks/frontblok-components

Peer dependencies: @mui/material and @mui/icons-material 5 to 7, @emotion/react, @emotion/styled, @react-oauth/google 0.12, react and react-dom 18 or 19, react-router-dom 6 or 7.

Views

| Component | Props | Does | |-----------|-------|------| | AuthView | branding, authApi, useAuth, generateOAuthNonce | Sign-in and registration, Google Sign-In | | ForgotPasswordView | authApi, authRoute? | Requests a reset link (valid one hour) | | ResetPasswordView | authApi, authRoute? | Sets the new password from the link's token | | VerifyEmailView | authApi, successRoute?, errorRoute? | Verifies the email from the link's token | | SettingsView | authApi, useAuth, homeRoute?, children? | Profile, sign out, account deletion | | SupportView | supportEmail | Opens the user's email app with the request addressed to supportEmail |

Shared

| Component | Props | Does | |-----------|-------|------| | ErrorBoundary | children, supportEmail | Shows ErrorFallback instead of a blank page after a render error | | ErrorFallback | error, errorInfo, resetError, supportEmail | The error page itself | | ConfirmationModal | open, onClose, onConfirm, title, message, ... | Asks before an action | | createNavbar(config) | brand, navigation, useAuth, gradient | Returns the app's navbar component | | createAppTheme(options?) | palette, typography, components, border radius overrides | The MUI theme |

Usage

import {
  AuthView,
  ForgotPasswordView,
  ResetPasswordView,
  VerifyEmailView,
  SupportView,
  ErrorBoundary,
} from '@rationalbloks/frontblok-components';
import { authApi, useClientAuth, generateOAuthNonce } from './services/datablokApi';
import { BRANDING } from './config/branding';

function App() {
  return (
    <ErrorBoundary supportEmail="[email protected]">
      <Routes>
        <Route path="/auth" element={
          <AuthView branding={BRANDING} authApi={authApi} useAuth={useClientAuth} generateOAuthNonce={generateOAuthNonce} />
        } />
        <Route path="/forgot-password" element={<ForgotPasswordView authApi={authApi} />} />
        <Route path="/reset-password" element={<ResetPasswordView authApi={authApi} />} />
        <Route path="/verify-email" element={<VerifyEmailView authApi={authApi} successRoute="/dashboard" />} />
        <Route path="/support" element={<SupportView supportEmail="[email protected]" />} />
      </Routes>
    </ErrorBoundary>
  );
}

Branding

export const BRANDING = {
  appName: 'My App',
  tagline: 'Welcome',
  logoLetter: 'M',
  primaryGradient: 'linear-gradient(135deg, #1e40af 0%, #2563eb 100%)',
  primaryGradientHover: 'linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%)',
  logoShadow: '0 4px 20px rgba(30, 64, 175, 0.3)',
  dashboardRoute: '/dashboard',
  messages: {
    loginSuccess: 'Signed in.',
    registerSuccess: 'Account created.',
  },
  securityBadge: 'Secure Access',
};

License

MIT