@ttoss/react-auth-strapi 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024, Terezinha Tech Operations (ttoss)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,216 @@
+# @ttoss/react-auth-strapi
+
+Pre-configured authentication components for React applications using Strapi CMS backend with [strapi-plugin-refresh-token](https://github.com/redon2/strapi-plugin-refresh-token).
+
+## Installation
+
+```bash
+pnpm add @ttoss/react-auth-strapi @ttoss/react-notifications
+```
+
+## Quickstart
+
+```tsx
+import { AuthProvider, Auth, useAuth } from '@ttoss/react-auth-strapi';
+import { NotificationProvider } from '@ttoss/react-notifications';
+
+// 1. Wrap your app with providers
+function App() {
+  return (
+    <NotificationProvider>
+      <AuthProvider apiUrl="https://your-strapi-api.com/api">
+        <AuthenticatedApp />
+      </AuthProvider>
+    </NotificationProvider>
+  );
+}
+
+// 2. Use the pre-built Auth component
+function LoginPage() {
+  return <Auth />;
+}
+
+// 3. Access authentication state
+function AuthenticatedApp() {
+  const { isAuthenticated, user, signOut } = useAuth();
+
+  if (!isAuthenticated) {
+    return <LoginPage />;
+  }
+
+  return (
+    <div>
+      <p>Welcome, {user?.email}</p>
+      <button onClick={signOut}>Sign Out</button>
+    </div>
+  );
+}
+```
+
+## Features
+
+- **Zero configuration**: Pre-configured Strapi authentication handlers
+- **Complete auth flows**: Sign in, sign up, forgot password, email confirmation
+- **Token management**: Automatic refresh token handling with secure storage
+- **Error handling**: Built-in notifications for authentication errors
+- **Email verification**: Automatic resend confirmation emails for unverified accounts
+
+## Strapi Backend Setup
+
+This package requires Strapi with specific plugins and configuration:
+
+### Required Strapi Plugins
+
+1. **Users & Permissions plugin** (built-in)
+2. **[strapi-plugin-refresh-token](https://github.com/redon2/strapi-plugin-refresh-token)** for token refresh functionality
+
+```bash
+npm install strapi-plugin-refresh-token
+```
+
+### Strapi API Endpoints
+
+The package expects these Strapi endpoints to be available:
+
+```mermaid
+flowchart LR
+    A[Auth Component] --> B[ /auth/local]
+    A --> C[ /auth/local/register]
+    A --> D[ /auth/forgot-password]
+    A --> E[ /auth/send-email-confirmation]
+    A --> F[ /auth/local/refresh]
+    A --> G[ /users/me]
+```
+
+- `POST /auth/local` - Sign in with email/password
+- `POST /auth/local/register` - User registration
+- `POST /auth/forgot-password` - Request password reset
+- `POST /auth/send-email-confirmation` - Resend email confirmation
+- `POST /auth/local/refresh` - Refresh access token
+- `GET /users/me` - Get current user profile
+
+## API Reference
+
+### AuthProvider
+
+```tsx
+<AuthProvider
+  apiUrl="https://your-strapi-api.com/api" // Your Strapi API base URL
+>
+  {children}
+</AuthProvider>
+```
+
+The provider automatically:
+
+- Manages refresh tokens in localStorage
+- Handles token refresh on app startup
+- Provides authentication context to child components
+
+### Auth Component
+
+Pre-configured authentication flow with all handlers implemented:
+
+```tsx
+<Auth />
+```
+
+The component automatically handles:
+
+- **Sign in**: Authenticates with Strapi local strategy
+- **Sign up**: Registers new users and triggers email confirmation
+- **Forgot password**: Initiates password reset flow
+- **Email confirmation**: Manages email verification process
+- **Error notifications**: Shows user-friendly error messages
+
+### useAuth Hook
+
+Enhanced version of the core useAuth hook with Strapi-specific context:
+
+```tsx
+const {
+  isAuthenticated, // boolean
+  user, // { id: string, email: string, emailVerified?: boolean }
+  tokens, // { accessToken: string, refreshToken: string }
+  signOut, // () => Promise<void>
+  setAuthData, // Update auth state manually
+  apiUrl, // Strapi API URL from context
+} = useAuth();
+```
+
+## Authentication Flow
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant A as Auth Component
+    participant S as Strapi API
+    participant L as LocalStorage
+
+    U->>A: Enter credentials
+    A->>S: POST /auth/local
+    S-->>A: { jwt, refreshToken, user }
+    A->>L: Store refreshToken
+    A->>A: setAuthData({ user, tokens, isAuthenticated: true })
+
+    Note over A,L: On app restart
+    A->>L: Get stored refreshToken
+    A->>S: POST /auth/local/refresh
+    S-->>A: { jwt, refreshToken }
+    A->>S: GET /users/me (with jwt)
+    S-->>A: user data
+    A->>A: Restore authentication state
+```
+
+## Error Handling
+
+The package integrates with `@ttoss/react-notifications` to display authentication errors:
+
+- **Invalid credentials**: "Sign in failed" notification
+- **Unconfirmed email**: Automatically resends confirmation email
+- **Registration errors**: "Sign up failed" with specific error message
+- **Network errors**: Generic error messages for API failures
+
+## Token Security
+
+### Refresh Token Storage
+
+- Refresh tokens are stored in `localStorage` with the key `ttoss-strapi-auth-refresh-token`
+- Access tokens are kept in memory only (React state)
+- Tokens are automatically cleared on sign out or authentication errors
+
+### Automatic Token Refresh
+
+- On app startup, attempts to refresh tokens if a refresh token exists
+- If refresh fails, user is automatically signed out
+- No manual token management required
+
+## Dependencies
+
+- `@ttoss/react-auth-core`: Core authentication abstractions
+- `@ttoss/react-notifications`: Error and success notifications
+
+## Type Definitions
+
+```tsx
+type StrapiUser = {
+  id: string;
+  email: string;
+  emailVerified?: boolean;
+};
+
+type StrapiTokens = {
+  accessToken: string; // JWT from Strapi
+  refreshToken: string; // Refresh token from plugin
+};
+
+type StrapiAuthResponse = {
+  jwt: string;
+  refreshToken: string;
+  user: {
+    id: string;
+    email: string;
+    confirmed: boolean;
+  };
+};
+```

package/dist/esm/index.js

@@ -0,0 +1,291 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// src/Auth.tsx
+import { Auth as AuthCore, useAuthScreen } from "@ttoss/react-auth-core";
+import { useNotifications } from "@ttoss/react-notifications";
+import * as React2 from "react";
+
+// src/AuthProvider.tsx
+import { AuthProvider as AuthProviderCore, useAuth as useAuthCore } from "@ttoss/react-auth-core";
+import * as React from "react";
+
+// src/storage.ts
+var AUTH_STORAGE_REFRESH_TOKEN_KEY = "ttoss-strapi-auth-refresh-token";
+var isBrowser = typeof window !== "undefined";
+var getLocalStorage = () => {
+  try {
+    return isBrowser ? window.localStorage : null;
+  } catch {
+    return null;
+  }
+};
+var storage = {
+  getRefreshToken: () => {
+    const ls = getLocalStorage();
+    if (!ls) return null;
+    try {
+      return ls.getItem(AUTH_STORAGE_REFRESH_TOKEN_KEY);
+    } catch {
+      return null;
+    }
+  },
+  setRefreshToken: refreshToken => {
+    const ls = getLocalStorage();
+    if (!ls) return;
+    try {
+      ls.setItem(AUTH_STORAGE_REFRESH_TOKEN_KEY, refreshToken);
+    } catch {}
+  },
+  clearRefreshToken: () => {
+    const ls = getLocalStorage();
+    if (!ls) return;
+    try {
+      ls.removeItem(AUTH_STORAGE_REFRESH_TOKEN_KEY);
+    } catch {}
+  }
+};
+
+// src/AuthProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var AuthContext = React.createContext({
+  apiUrl: ""
+});
+var AuthProvider = props => {
+  const getAuthData = React.useCallback(async () => {
+    try {
+      const refreshToken = storage.getRefreshToken();
+      if (!refreshToken) {
+        return null;
+      }
+      const refreshResponse = await fetch(`${props.apiUrl}/auth/local/refresh`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          refreshToken
+        })
+      });
+      const refreshData = await refreshResponse.json();
+      if ("error" in refreshData) {
+        storage.clearRefreshToken();
+        return null;
+      }
+      const meResponse = await fetch(`${props.apiUrl}/users/me`, {
+        headers: {
+          Authorization: `Bearer ${refreshData.jwt}`
+        }
+      });
+      const data = await meResponse.json();
+      if (!meResponse.ok) {
+        storage.clearRefreshToken();
+        return null;
+      }
+      return {
+        user: {
+          id: data.id,
+          email: data.email,
+          emailVerified: data.confirmed ?? data.emailVerified ?? data.user?.confirmed
+        },
+        tokens: {
+          accessToken: refreshData.jwt,
+          refreshToken: refreshData.refreshToken
+        },
+        isAuthenticated: true
+      };
+    } catch {
+      storage.clearRefreshToken();
+      return null;
+    }
+  }, [props.apiUrl]);
+  const signOut = React.useCallback(async () => {
+    storage.clearRefreshToken();
+  }, []);
+  return /* @__PURE__ */jsx(AuthContext.Provider, {
+    value: {
+      apiUrl: props.apiUrl
+    },
+    children: /* @__PURE__ */jsx(AuthProviderCore, {
+      getAuthData,
+      signOut,
+      children: props.children
+    })
+  });
+};
+var useAuth = () => {
+  const authCore = useAuthCore();
+  const {
+    apiUrl
+  } = React.useContext(AuthContext);
+  return {
+    apiUrl,
+    ...authCore
+  };
+};
+
+// src/Auth.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Auth = () => {
+  const {
+    setAuthData,
+    apiUrl
+  } = useAuth();
+  const {
+    screen,
+    setScreen
+  } = useAuthScreen();
+  const {
+    addNotification
+  } = useNotifications();
+  const onSignIn = React2.useCallback(async ({
+    email,
+    password
+  }) => {
+    try {
+      const response = await fetch(`${apiUrl}/auth/local`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          identifier: email,
+          password
+        })
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        const errorMessage = data.error?.message;
+        if (errorMessage === "Your account email is not confirmed") {
+          const resendResponse = await fetch(`${apiUrl}/auth/send-email-confirmation`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+              email
+            })
+          });
+          if (!resendResponse.ok) {
+            const resendData = await resendResponse.json();
+            addNotification({
+              title: "Resend confirmation email failed",
+              message: resendData.error?.message || "An error occurred while resending the confirmation email.",
+              type: "error"
+            });
+            return;
+          }
+          setScreen({
+            value: "confirmSignUpCheckEmail"
+          });
+          return;
+        }
+        addNotification({
+          title: "Sign in failed",
+          message: data.error?.message || "An error occurred during sign in.",
+          type: "error"
+        });
+        return;
+      }
+      storage.setRefreshToken(data.refreshToken);
+      setAuthData({
+        user: {
+          id: data.user.id,
+          email: data.user.email,
+          emailVerified: data.user.confirmed
+        },
+        tokens: {
+          accessToken: data.jwt,
+          refreshToken: data.refreshToken
+        },
+        isAuthenticated: true
+      });
+    } catch {
+      addNotification({
+        title: "Network Error",
+        message: "Unable to connect to the server. Please check your connection.",
+        type: "error"
+      });
+    }
+  }, [setAuthData, setScreen, addNotification, apiUrl]);
+  const onSignUp = React2.useCallback(async ({
+    email,
+    password
+  }) => {
+    try {
+      const response = await fetch(`${apiUrl}/auth/local/register`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          username: email,
+          // Assuming username is the same as email
+          email,
+          password
+        })
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        addNotification({
+          title: "Sign up failed",
+          message: data.error?.message || "An error occurred during sign up.",
+          type: "error"
+        });
+        return;
+      }
+      setScreen({
+        value: "confirmSignUpCheckEmail"
+      });
+    } catch {
+      addNotification({
+        title: "Network Error",
+        message: "Unable to connect to the server. Please check your connection.",
+        type: "error"
+      });
+    }
+  }, [addNotification, setScreen, apiUrl]);
+  const onForgotPassword = React2.useCallback(async ({
+    email
+  }) => {
+    try {
+      const response = await fetch(`${apiUrl}/auth/forgot-password`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          email
+        })
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        addNotification({
+          title: "Forgot password failed",
+          message: data.error?.message || "An error occurred during forgot password.",
+          type: "error"
+        });
+        return;
+      }
+    } catch {
+      addNotification({
+        title: "Network Error",
+        message: "Unable to connect to the server. Please check your connection.",
+        type: "error"
+      });
+    }
+  }, [addNotification, apiUrl]);
+  const onConfirmSignUpCheckEmail = React2.useCallback(async () => {
+    setScreen({
+      value: "signIn"
+    });
+  }, [setScreen]);
+  return /* @__PURE__ */jsx2(AuthCore, {
+    screen,
+    setScreen,
+    onSignIn,
+    onSignUp,
+    onForgotPassword,
+    onConfirmSignUpCheckEmail
+  });
+};
+export { Auth, AuthProvider, useAuth };

package/dist/index.d.cts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _ttoss_react_auth_core from '@ttoss/react-auth-core';
+import * as React from 'react';
+
+declare const Auth: () => react_jsx_runtime.JSX.Element;
+
+declare const AuthProvider: (props: React.PropsWithChildren<{
+    apiUrl: string;
+}>) => react_jsx_runtime.JSX.Element;
+declare const useAuth: () => {
+    signOut?: () => Promise<void>;
+    isAuthenticated: boolean;
+    user: _ttoss_react_auth_core.AuthUser | null;
+    tokens: _ttoss_react_auth_core.AuthTokens | null;
+    setAuthData: React.Dispatch<React.SetStateAction<_ttoss_react_auth_core.AuthData>>;
+    apiUrl: string;
+};
+
+export { Auth, AuthProvider, useAuth };

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _ttoss_react_auth_core from '@ttoss/react-auth-core';
+import * as React from 'react';
+
+declare const Auth: () => react_jsx_runtime.JSX.Element;
+
+declare const AuthProvider: (props: React.PropsWithChildren<{
+    apiUrl: string;
+}>) => react_jsx_runtime.JSX.Element;
+declare const useAuth: () => {
+    signOut?: () => Promise<void>;
+    isAuthenticated: boolean;
+    user: _ttoss_react_auth_core.AuthUser | null;
+    tokens: _ttoss_react_auth_core.AuthTokens | null;
+    setAuthData: React.Dispatch<React.SetStateAction<_ttoss_react_auth_core.AuthData>>;
+    apiUrl: string;
+};
+
+export { Auth, AuthProvider, useAuth };