@ttoss/react-auth-strapi 0.4.0 → 0.4.2

package/README.md

@@ -123,6 +123,35 @@ The component automatically handles:
 - **Email confirmation**: Manages email verification process
 - **Error notifications**: Shows user-friendly error messages
 
+#### Props
+
+```tsx
+<Auth
+  initialScreen={{ value: 'signUp' }} // Optional: start on a specific screen
+  logo={<MyLogo />} // Optional: custom logo
+  layout={{
+    // Optional: layout configuration
+    fullScreen: true,
+    sideContent: <BrandingContent />,
+    sideContentPosition: 'left',
+  }}
+/>
+```
+
+**initialScreen**: Set the initial authentication screen to display. Useful for:
+
+- Deep linking to specific auth flows (e.g., `/auth/signup` → `{ value: 'signUp' }`)
+- Redirecting users to password reset from email links
+- Pre-selecting sign up vs sign in based on user context
+
+Available screens:
+
+- `{ value: 'signIn' }` - Sign in screen (default)
+- `{ value: 'signUp' }` - Sign up screen
+- `{ value: 'forgotPassword' }` - Forgot password screen
+- `{ value: 'confirmSignUpCheckEmail' }` - Email confirmation reminder
+- `{ value: 'confirmResetPassword', context: { email: string } }` - Password reset screen
+
 ### useAuth Hook
 
 Enhanced version of the core useAuth hook with Strapi-specific context:
@@ -162,6 +191,104 @@ sequenceDiagram
     A->>A: Restore authentication state
 ```
 
+## Password Reset Flow with Email Links
+
+### Email Template Configuration
+
+When configuring the password reset email template in Strapi, use this URL format to enable deep linking:
+
+```html
+<p>We received a request to reset your password.</p>
+<p>If it was you, click the link below to create a new password:</p>
+<p><%= URL %>/auth?initialScreen=confirmResetPassword&code=<%= TOKEN %></p>
+<p>If it wasn't you, ignore this email. Your account will remain secure.</p>
+<p>Thank you,</p>
+<p>Team</p>
+```
+
+### React Router Integration
+
+To handle password reset links from email, configure your route to parse URL parameters and pass them to the Auth component:
+
+```tsx
+import { useSearchParams } from 'react-router-dom';
+import { Auth, type AuthScreen } from '@ttoss/react-auth-strapi';
+
+function AuthPage() {
+  const [searchParams] = useSearchParams();
+
+  // Parse URL parameters from email link
+  const initialScreenParam = searchParams.get('initialScreen');
+  const code = searchParams.get('code');
+
+  // Build the initialScreen object
+  let initialScreen: AuthScreen | undefined;
+
+  if (initialScreenParam === 'confirmResetPassword' && code) {
+    initialScreen = {
+      value: 'confirmResetPassword',
+      context: { code },
+    };
+  } else if (initialScreenParam) {
+    // Handle other screen types without context
+    initialScreen = { value: initialScreenParam };
+  }
+
+  return <Auth initialScreen={initialScreen} />;
+}
+```
+
+### Route Configuration
+
+```tsx
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider } from '@ttoss/react-auth-strapi';
+import { NotificationProvider } from '@ttoss/react-notifications';
+
+function App() {
+  return (
+    <NotificationProvider>
+      <AuthProvider apiUrl="https://your-strapi-api.com/api">
+        <BrowserRouter>
+          <Routes>
+            <Route path="/auth" element={<AuthPage />} />
+            <Route path="/" element={<HomePage />} />
+          </Routes>
+        </BrowserRouter>
+      </AuthProvider>
+    </NotificationProvider>
+  );
+}
+```
+
+### Complete Flow
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant E as Email
+    participant R as React Router
+    participant A as Auth Component
+    participant S as Strapi API
+
+    U->>A: Click "Forgot Password"
+    A->>S: POST /auth/forgot-password
+    S->>E: Send reset email with link
+    E-->>U: Email: /auth?initialScreen=confirmResetPassword&code=ABC123
+
+    Note over U,R: User clicks email link
+    U->>R: Navigate to /auth?initialScreen=...&code=...
+    R->>R: Parse searchParams
+    R->>A: <Auth initialScreen={{ value: 'confirmResetPassword', context: { code: 'ABC123' } }} />
+    A-->>U: Display Reset Password form with pre-filled code
+
+    U->>A: Enter new password
+    A->>S: POST /auth/reset-password { code, password }
+    S-->>A: Success
+    A->>A: setScreen({ value: 'signIn' })
+    A-->>U: Display Sign In screen with success notification
+```
+
 ## Error Handling
 
 The package integrates with `@ttoss/react-notifications` to display authentication errors:

package/dist/esm/index.js

@@ -135,7 +135,7 @@ var Auth = /* @__PURE__ */__name(props => {
   const {
     screen,
     setScreen
-  } = useAuthScreen();
+  } = useAuthScreen(props.initialScreen);
   const {
     addNotification
   } = useNotifications();
@@ -267,6 +267,12 @@ var Auth = /* @__PURE__ */__name(props => {
         });
         return;
       }
+      setScreen({
+        value: "confirmResetPassword",
+        context: {
+          email
+        }
+      });
     } catch {
       addNotification({
         title: "Network Error",
@@ -274,19 +280,63 @@ var Auth = /* @__PURE__ */__name(props => {
         type: "error"
       });
     }
-  }, [addNotification, apiUrl]);
+  }, [addNotification, setScreen, apiUrl]);
+  const onForgotPasswordResetPassword = React2.useCallback(async ({
+    email: _email,
+    code,
+    newPassword
+  }) => {
+    try {
+      const response = await fetch(`${apiUrl}/auth/reset-password`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          code,
+          password: newPassword,
+          passwordConfirmation: newPassword
+        })
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        addNotification({
+          title: "Reset password failed",
+          message: data.error?.message || "An error occurred during password reset.",
+          type: "error"
+        });
+        return;
+      }
+      addNotification({
+        title: "Password reset successful",
+        message: "You can now sign in with your new password.",
+        type: "success"
+      });
+      setScreen({
+        value: "signIn"
+      });
+    } catch {
+      addNotification({
+        title: "Network Error",
+        message: "Unable to connect to the server. Please check your connection.",
+        type: "error"
+      });
+    }
+  }, [addNotification, setScreen, apiUrl]);
   const onConfirmSignUpCheckEmail = React2.useCallback(async () => {
     setScreen({
       value: "signIn"
     });
   }, [setScreen]);
   return /* @__PURE__ */React2.createElement(AuthCore, {
-    ...props,
+    logo: props.logo,
+    layout: props.layout,
     screen,
     setScreen,
     onSignIn,
     onSignUp,
     onForgotPassword,
+    onForgotPasswordResetPassword,
     onConfirmSignUpCheckEmail
   });
 }, "Auth");

package/dist/index.d.cts

@@ -1,9 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _ttoss_react_auth_core from '@ttoss/react-auth-core';
-import { AuthProps } from '@ttoss/react-auth-core';
+import { AuthProps, AuthScreen } from '@ttoss/react-auth-core';
+export { AuthScreen } from '@ttoss/react-auth-core';
 import * as React from 'react';
 
-declare const Auth: (props: Pick<AuthProps, "logo" | "layout">) => react_jsx_runtime.JSX.Element;
+declare const Auth: (props: Pick<AuthProps, "logo" | "layout"> & {
+    initialScreen?: AuthScreen;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const AuthProvider: (props: React.PropsWithChildren<{
     apiUrl: string;

package/dist/index.d.ts

@@ -1,9 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _ttoss_react_auth_core from '@ttoss/react-auth-core';
-import { AuthProps } from '@ttoss/react-auth-core';
+import { AuthProps, AuthScreen } from '@ttoss/react-auth-core';
+export { AuthScreen } from '@ttoss/react-auth-core';
 import * as React from 'react';
 
-declare const Auth: (props: Pick<AuthProps, "logo" | "layout">) => react_jsx_runtime.JSX.Element;
+declare const Auth: (props: Pick<AuthProps, "logo" | "layout"> & {
+    initialScreen?: AuthScreen;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const AuthProvider: (props: React.PropsWithChildren<{
     apiUrl: string;

package/dist/index.js

@@ -179,7 +179,7 @@ var Auth = /* @__PURE__ */__name(props => {
   const {
     screen,
     setScreen
-  } = (0, import_react_auth_core2.useAuthScreen)();
+  } = (0, import_react_auth_core2.useAuthScreen)(props.initialScreen);
   const {
     addNotification
   } = (0, import_react_notifications.useNotifications)();
@@ -311,6 +311,12 @@ var Auth = /* @__PURE__ */__name(props => {
         });
         return;
       }
+      setScreen({
+        value: "confirmResetPassword",
+        context: {
+          email
+        }
+      });
     } catch {
       addNotification({
         title: "Network Error",
@@ -318,19 +324,63 @@ var Auth = /* @__PURE__ */__name(props => {
         type: "error"
       });
     }
-  }, [addNotification, apiUrl]);
+  }, [addNotification, setScreen, apiUrl]);
+  const onForgotPasswordResetPassword = React2.useCallback(async ({
+    email: _email,
+    code,
+    newPassword
+  }) => {
+    try {
+      const response = await fetch(`${apiUrl}/auth/reset-password`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          code,
+          password: newPassword,
+          passwordConfirmation: newPassword
+        })
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        addNotification({
+          title: "Reset password failed",
+          message: data.error?.message || "An error occurred during password reset.",
+          type: "error"
+        });
+        return;
+      }
+      addNotification({
+        title: "Password reset successful",
+        message: "You can now sign in with your new password.",
+        type: "success"
+      });
+      setScreen({
+        value: "signIn"
+      });
+    } catch {
+      addNotification({
+        title: "Network Error",
+        message: "Unable to connect to the server. Please check your connection.",
+        type: "error"
+      });
+    }
+  }, [addNotification, setScreen, apiUrl]);
   const onConfirmSignUpCheckEmail = React2.useCallback(async () => {
     setScreen({
       value: "signIn"
     });
   }, [setScreen]);
   return /* @__PURE__ */React2.createElement(import_react_auth_core2.Auth, {
-    ...props,
+    logo: props.logo,
+    layout: props.layout,
     screen,
     setScreen,
     onSignIn,
     onSignUp,
     onForgotPassword,
+    onForgotPasswordResetPassword,
     onConfirmSignUpCheckEmail
   });
 }, "Auth");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth-strapi",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Authentication components and abstractions for React apps using Strapi.",
   "license": "MIT",
   "author": "ttoss",
@@ -26,19 +26,23 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-auth-core": "^0.4.0",
     "@ttoss/react-i18n": "^2.1.0",
-    "@ttoss/react-notifications": "^2.6.0"
+    "@ttoss/react-auth-core": "^0.4.2",
+    "@ttoss/react-notifications": "^2.6.1"
   },
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
     "@types/react": "^19.2.14",
     "jest": "^30.2.0",
     "react": "^19.2.4",
     "tsup": "^8.5.1",
+    "@ttoss/config": "^1.36.0",
     "@ttoss/i18n-cli": "^0.7.39",
+    "@ttoss/react-auth-core": "^0.4.2",
     "@ttoss/react-i18n": "^2.1.0",
-    "@ttoss/react-auth-core": "^0.4.0",
-    "@ttoss/react-notifications": "^2.6.0"
+    "@ttoss/react-notifications": "^2.6.1",
+    "@ttoss/ui": "^6.7.0",
+    "@ttoss/test-utils": "^4.1.0"
   },
   "keywords": [
     "React",
@@ -53,6 +57,6 @@
   "scripts": {
     "build": "tsup",
     "i18n": "ttoss-i18n",
-    "test": "echo jest --projects tests/unit"
+    "test": "jest --projects tests/unit"
   }
 }