Last Mile Auth Kit

This kit provides the necessary components to integrate your Last Mile instance's authentication and role-based access control (RBAC) into any React application.

Installation

npm install @your-npm-username/lastmile-auth-kit

Remember to replace @your-npm-username with your actual NPM username.

Setup

1. Set Environment Variable: Create a .env.local file in the root of your project (if you don't have one already) and add the following line. This must point to your deployed Last Mile instance.

   NEXT_PUBLIC_LASTMILE_URL=https://your-last-mile-instance.com

2. Wrap Your App: In your main application file (e.g., _app.js or App.js), wrap your entire application with the AuthProvider.

   import { AuthProvider } from '@your-npm-username/lastmile-auth-kit';
   
   function MyApp({ Component, pageProps }) {
     return (
       <AuthProvider>
         <Component {...pageProps} />
       </AuthProvider>
     );
   }
   
   export default MyApp;

Usage

Rendering an Embed

Use the <Embed /> component to render any component you've created in your Last Mile dashboard. Just pass the unique token for that embed.

import { Embed } from '@your-npm-username/lastmile-auth-kit';

function LoginPage() {
  return (
    <div>
      <h1>Login</h1>
      <Embed token="your-auth-embed-token-here" />
    </div>
  );
}

Accessing Auth State

Use the useAuth hook in any component to access the user's session, permissions, and loading state.

import { useAuth } from '@your-npm-username/lastmile-auth-kit';

function UserProfile() {
  const { isAuthenticated, user, loading } = useAuth();

  if (loading) return <p>Loading...</p>;
  if (!isAuthenticated) return <p>Please log in.</p>;

  return <h1>Welcome, {user.name || user.email}!</h1>;
}

Permission-Based Rendering

Use the <Can> component to conditionally render UI elements based on the current user's permissions. The permissions are defined in your Last Mile dashboard.

import { Can } from '@your-npm-username/lastmile-auth-kit';

function MyDashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      
      <Can permission="project:create">
        <button>Create New Project</button>
      </Can>

      <Can permission="admin:dashboard:view">
        <a href="/admin">Go to Admin Panel</a>
      </Can>
    </div>
  );
}