@ttoss/react-auth-strapi 0.7.0 → 0.8.0

package/README.md

@@ -51,6 +51,7 @@ function AuthenticatedApp() {
 
 - **Zero configuration**: Pre-configured Strapi authentication handlers
 - **Complete auth flows**: Sign in, sign up, forgot password, email confirmation
+- **Social sign-in**: Google/Facebook via Strapi's Users & Permissions providers
 - **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
@@ -88,6 +89,8 @@ flowchart LR
 - `POST /auth/send-email-confirmation` - Resend email confirmation
 - `POST /auth/local/refresh` - Refresh access token
 - `GET /users/me` - Get current user profile
+- `GET /connect/:provider` - Kicks off a Users & Permissions social provider (e.g. Google)
+- `GET /auth/:provider/callback` - Exchanges the provider's callback query string for a Strapi JWT
 
 ## API Reference
 
@@ -135,6 +138,7 @@ The component automatically handles:
     sideContent: <BrandingContent />,
     sideContentPosition: 'left',
   }}
+  socialProviders={['Google']} // Optional: renders social sign-in buttons
 />
 ```
 
@@ -289,6 +293,99 @@ sequenceDiagram
     A-->>U: Display Sign In screen with success notification
 ```
 
+## Social Sign-In (Google, Facebook)
+
+### Strapi Provider Setup
+
+In Strapi Admin → **Settings → Users & Permissions → Providers**, enable the provider (e.g. Google), set its Client ID/Secret, and set **"The redirect URL to your front-end app"** to the route this package's callback handler is mounted at, e.g.:
+
+```
+https://your-app.com/connect/google/redirect
+```
+
+### Enabling the Button
+
+Pass `socialProviders` to `Auth` to render the "Continue with Google" button on the sign-in/sign-up screens. Clicking it redirects the browser to `${apiUrl}/connect/google`, which Strapi uses to start the OAuth flow:
+
+```tsx
+import { Auth } from '@ttoss/react-auth-strapi';
+
+function LoginPage() {
+  return <Auth socialProviders={['Google']} />;
+}
+```
+
+### Handling the Redirect
+
+Strapi completes the OAuth exchange itself and redirects the browser back to the URL configured in the admin panel, appending a callback query string (e.g. `?access_token=...`). Mount `AuthSocialSignInCallback` at that route to forward the query string to `${apiUrl}/auth/google/callback` and authenticate the user:
+
+```tsx
+import { useNavigate } from 'react-router-dom';
+import { AuthSocialSignInCallback } from '@ttoss/react-auth-strapi';
+
+function GoogleRedirectPage() {
+  const navigate = useNavigate();
+
+  return (
+    <AuthSocialSignInCallback
+      provider="google"
+      onSuccess={() => {
+        return navigate('/');
+      }}
+      onError={() => {
+        return navigate('/auth');
+      }}
+    >
+      <p>Signing you in…</p>
+    </AuthSocialSignInCallback>
+  );
+}
+```
+
+```tsx
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { AuthProvider } from '@ttoss/react-auth-strapi';
+
+function App() {
+  return (
+    <AuthProvider apiUrl="https://your-strapi-api.com/api">
+      <BrowserRouter>
+        <Routes>
+          <Route path="/auth" element={<AuthPage />} />
+          <Route
+            path="/connect/google/redirect"
+            element={<GoogleRedirectPage />}
+          />
+          <Route path="/" element={<HomePage />} />
+        </Routes>
+      </BrowserRouter>
+    </AuthProvider>
+  );
+}
+```
+
+### Flow
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant A as Auth Component
+    participant S as Strapi API
+    participant G as Google
+    participant C as AuthSocialSignInCallback
+
+    U->>A: Click "Continue with Google"
+    A->>S: Redirect to /connect/google
+    S->>G: Redirect to Google OAuth consent
+    G-->>S: Redirect back with provider code
+    S-->>U: Redirect to /connect/google/redirect?access_token=...
+    U->>C: Browser loads redirect route
+    C->>S: GET /auth/google/callback?access_token=...
+    S-->>C: { jwt, refreshToken, user }
+    C->>C: setAuthData({ user, tokens, isAuthenticated: true })
+    C-->>U: onSuccess() navigates into the app
+```
+
 ## Error Handling
 
 The package integrates with `@ttoss/react-notifications` to display authentication errors:

package/dist/index.cjs

@@ -149,6 +149,148 @@ var useAuth = () => {
 
 //#endregion
 //#region src/Auth.tsx
+var GENERIC_ERROR_MESSAGE$1 = "Unable to connect to the server. Please check your connection.";
+var signInWithEmail = async ({
+  apiUrl,
+  email,
+  password,
+  notifyError,
+  onUnconfirmedEmail
+}) => {
+  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) {
+    if (data.error?.message === "Your account email is not confirmed") {
+      await onUnconfirmedEmail();
+      return;
+    }
+    notifyError({
+      title: "Sign in failed",
+      message: data.error?.message || "An error occurred during sign in."
+    });
+    return;
+  }
+  storage.setRefreshToken(data.refreshToken);
+  return {
+    user: {
+      id: data.user.id,
+      email: data.user.email,
+      emailVerified: data.user.confirmed
+    },
+    tokens: {
+      accessToken: data.jwt,
+      refreshToken: data.refreshToken
+    },
+    isAuthenticated: true
+  };
+};
+var resendEmailConfirmation = async ({
+  apiUrl,
+  email,
+  notifyError
+}) => {
+  const response = await fetch(`${apiUrl}/auth/send-email-confirmation`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      email
+    })
+  });
+  if (!response.ok) {
+    notifyError({
+      title: "Resend confirmation email failed",
+      message: (await response.json()).error?.message || "An error occurred while resending the confirmation email."
+    });
+    return false;
+  }
+  return true;
+};
+var registerWithEmail = async ({
+  apiUrl,
+  email,
+  password,
+  notifyError
+}) => {
+  const response = await fetch(`${apiUrl}/auth/local/register`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      username: email,
+      email,
+      password
+    })
+  });
+  if (!response.ok) {
+    notifyError({
+      title: "Sign up failed",
+      message: (await response.json()).error?.message || "An error occurred during sign up."
+    });
+    return false;
+  }
+  return true;
+};
+var requestPasswordReset = async ({
+  apiUrl,
+  email,
+  notifyError
+}) => {
+  const response = await fetch(`${apiUrl}/auth/forgot-password`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      email
+    })
+  });
+  if (!response.ok) {
+    notifyError({
+      title: "Forgot password failed",
+      message: (await response.json()).error?.message || "An error occurred during forgot password."
+    });
+    return false;
+  }
+  return true;
+};
+var resetPasswordWithCode = async ({
+  apiUrl,
+  code,
+  newPassword,
+  notifyError
+}) => {
+  const response = await fetch(`${apiUrl}/auth/reset-password`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      code,
+      password: newPassword,
+      passwordConfirmation: newPassword
+    })
+  });
+  if (!response.ok) {
+    notifyError({
+      title: "Reset password failed",
+      message: (await response.json()).error?.message || "An error occurred during password reset."
+    });
+    return false;
+  }
+  return true;
+};
 var Auth = props => {
   const {
     setAuthData,
@@ -161,193 +303,124 @@ var Auth = props => {
   const {
     addNotification
   } = (0, _ttoss_react_notifications.useNotifications)();
+  const notifyError = react.useCallback(({
+    title,
+    message
+  }) => {
+    addNotification({
+      title,
+      message: message || GENERIC_ERROR_MESSAGE$1,
+      type: "error"
+    });
+  }, [addNotification]);
   const onSignIn = react.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) {
-        if (data.error?.message === "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) {
-            addNotification({
-              title: "Resend confirmation email failed",
-              message: (await resendResponse.json()).error?.message || "An error occurred while resending the confirmation email.",
-              type: "error"
-            });
-            return;
-          }
-          setScreen({
+      const authData = await signInWithEmail({
+        apiUrl,
+        email,
+        password,
+        notifyError,
+        onUnconfirmedEmail: async () => {
+          if (await resendEmailConfirmation({
+            apiUrl,
+            email,
+            notifyError
+          })) 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
       });
+      if (authData) setAuthData(authData);
     } catch {
-      addNotification({
-        title: "Network Error",
-        message: "Unable to connect to the server. Please check your connection.",
-        type: "error"
+      notifyError({
+        title: "Network Error"
       });
     }
-  }, [setAuthData, setScreen, addNotification, apiUrl]);
+  }, [setAuthData, setScreen, notifyError, apiUrl]);
   const onSignUp = react.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,
-          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({
+      if (await registerWithEmail({
+        apiUrl,
+        email,
+        password,
+        notifyError
+      })) setScreen({
         value: "confirmSignUpCheckEmail"
       });
     } catch {
-      addNotification({
-        title: "Network Error",
-        message: "Unable to connect to the server. Please check your connection.",
-        type: "error"
+      notifyError({
+        title: "Network Error"
       });
     }
-  }, [addNotification, setScreen, apiUrl]);
+  }, [setScreen, notifyError, apiUrl]);
   const onForgotPassword = react.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;
-      }
-      setScreen({
+      if (await requestPasswordReset({
+        apiUrl,
+        email,
+        notifyError
+      })) setScreen({
         value: "confirmResetPassword",
         context: {
           email
         }
       });
     } catch {
-      addNotification({
-        title: "Network Error",
-        message: "Unable to connect to the server. Please check your connection.",
-        type: "error"
+      notifyError({
+        title: "Network Error"
       });
     }
-  }, [addNotification, setScreen, apiUrl]);
+  }, [setScreen, notifyError, apiUrl]);
   const onForgotPasswordResetPassword = react.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) {
+      if (await resetPasswordWithCode({
+        apiUrl,
+        code,
+        newPassword,
+        notifyError
+      })) {
         addNotification({
-          title: "Reset password failed",
-          message: data.error?.message || "An error occurred during password reset.",
-          type: "error"
+          title: "Password reset successful",
+          message: "You can now sign in with your new password.",
+          type: "success"
+        });
+        setScreen({
+          value: "signIn"
         });
-        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"
+      notifyError({
+        title: "Network Error"
       });
     }
-  }, [addNotification, setScreen, apiUrl]);
+  }, [setScreen, notifyError, addNotification, apiUrl]);
   const onConfirmSignUpCheckEmail = react.useCallback(async () => {
     setScreen({
       value: "signIn"
     });
   }, [setScreen]);
+  const onSocialSignIn = react.useCallback(({
+    provider
+  }) => {
+    /**
+    * Kicks off Strapi's Users & Permissions provider flow. Strapi handles
+    * the OAuth exchange and redirects back to the frontend's configured
+    * redirect URL (e.g. `/connect/google/redirect`), which
+    * `AuthSocialSignInCallback` consumes.
+    */
+    window.location.href = `${apiUrl}/connect/${provider.toLowerCase()}`;
+  }, [apiUrl]);
   return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_react_auth_core.Auth, {
     logo: props.logo,
     layout: props.layout,
@@ -357,11 +430,87 @@ var Auth = props => {
     onSignUp,
     onForgotPassword,
     onForgotPasswordResetPassword,
-    onConfirmSignUpCheckEmail
+    onConfirmSignUpCheckEmail,
+    socialProviders: props.socialProviders,
+    onSocialSignIn: props.socialProviders ? onSocialSignIn : void 0
+  });
+};
+
+//#endregion
+//#region src/AuthSocialSignInCallback.tsx
+var GENERIC_ERROR_MESSAGE = "An error occurred during social sign in.";
+var exchangeSocialSignInCallback = async ({
+  apiUrl,
+  provider
+}) => {
+  const response = await fetch(`${apiUrl}/auth/${provider}/callback${window.location.search}`);
+  const data = await response.json();
+  if (!response.ok) throw new Error(data.error?.message || GENERIC_ERROR_MESSAGE);
+  if (data.refreshToken) storage.setRefreshToken(data.refreshToken);
+  return {
+    user: {
+      id: data.user.id,
+      email: data.user.email,
+      emailVerified: data.user.confirmed
+    },
+    tokens: {
+      accessToken: data.jwt,
+      refreshToken: data.refreshToken
+    },
+    isAuthenticated: true
+  };
+};
+/**
+* Mount this at the redirect route configured in Strapi's provider settings
+* (e.g. `/connect/google/redirect`). It reads the callback query string
+* Strapi appended to the redirect, forwards it to
+* `${apiUrl}/auth/:provider/callback`, and authenticates the user with the
+* resulting JWT — the same way `Auth`'s `onSignIn` does for email/password.
+*/
+var AuthSocialSignInCallback = props => {
+  const {
+    provider,
+    onSuccess,
+    onError,
+    children
+  } = props;
+  const {
+    apiUrl,
+    setAuthData
+  } = useAuth();
+  const {
+    addNotification
+  } = (0, _ttoss_react_notifications.useNotifications)();
+  react.useEffect(() => {
+    let cancelled = false;
+    exchangeSocialSignInCallback({
+      apiUrl,
+      provider
+    }).then(authData => {
+      if (cancelled) return;
+      setAuthData(authData);
+      onSuccess?.();
+    }).catch(error => {
+      if (cancelled) return;
+      const message = error instanceof Error ? error.message : GENERIC_ERROR_MESSAGE;
+      addNotification({
+        title: "Sign in failed",
+        message,
+        type: "error"
+      });
+      onError?.(message);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiUrl, provider, setAuthData, addNotification, onSuccess, onError]);
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {
+    children
   });
 };
 
 //#endregion
 exports.Auth = Auth;
 exports.AuthProvider = AuthProvider;
+exports.AuthSocialSignInCallback = AuthSocialSignInCallback;
 exports.useAuth = useAuth;

package/dist/index.d.cts

@@ -3,7 +3,7 @@ import { AuthProps, AuthScreen } from "@ttoss/react-auth-core";
 import * as React from "react";
 
 //#region src/Auth.d.ts
-declare const Auth: (props: Pick<AuthProps, "logo" | "layout"> & {
+declare const Auth: (props: Pick<AuthProps, "logo" | "layout" | "socialProviders"> & {
   initialScreen?: AuthScreen;
 }) => import("react/jsx-runtime").JSX.Element;
 //#endregion
@@ -20,4 +20,20 @@ declare const useAuth: () => {
   apiUrl: string;
 };
 //#endregion
-export { Auth, AuthProvider, type AuthScreen, useAuth };
+//#region src/AuthSocialSignInCallback.d.ts
+type AuthSocialSignInCallbackProps = {
+  /** Strapi provider slug, e.g. `"google"`, matching `/connect/:provider`. */provider: string; /** Called after the callback exchange sets the user as authenticated. */
+  onSuccess?: () => void; /** Called if the callback exchange fails, with a user-facing message. */
+  onError?: (message: string) => void; /** Rendered while the exchange is in flight (e.g. a spinner). */
+  children?: React.ReactNode;
+};
+/**
+ * Mount this at the redirect route configured in Strapi's provider settings
+ * (e.g. `/connect/google/redirect`). It reads the callback query string
+ * Strapi appended to the redirect, forwards it to
+ * `${apiUrl}/auth/:provider/callback`, and authenticates the user with the
+ * resulting JWT — the same way `Auth`'s `onSignIn` does for email/password.
+ */
+declare const AuthSocialSignInCallback: (props: AuthSocialSignInCallbackProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Auth, AuthProvider, type AuthScreen, AuthSocialSignInCallback, AuthSocialSignInCallbackProps, useAuth };

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import { AuthProps, AuthScreen } from "@ttoss/react-auth-core";
 import * as React from "react";
 
 //#region src/Auth.d.ts
-declare const Auth: (props: Pick<AuthProps, "logo" | "layout"> & {
+declare const Auth: (props: Pick<AuthProps, "logo" | "layout" | "socialProviders"> & {
   initialScreen?: AuthScreen;
 }) => import("react/jsx-runtime").JSX.Element;
 //#endregion
@@ -20,4 +20,20 @@ declare const useAuth: () => {
   apiUrl: string;
 };
 //#endregion
-export { Auth, AuthProvider, type AuthScreen, useAuth };
+//#region src/AuthSocialSignInCallback.d.ts
+type AuthSocialSignInCallbackProps = {
+  /** Strapi provider slug, e.g. `"google"`, matching `/connect/:provider`. */provider: string; /** Called after the callback exchange sets the user as authenticated. */
+  onSuccess?: () => void; /** Called if the callback exchange fails, with a user-facing message. */
+  onError?: (message: string) => void; /** Rendered while the exchange is in flight (e.g. a spinner). */
+  children?: React.ReactNode;
+};
+/**
+ * Mount this at the redirect route configured in Strapi's provider settings
+ * (e.g. `/connect/google/redirect`). It reads the callback query string
+ * Strapi appended to the redirect, forwards it to
+ * `${apiUrl}/auth/:provider/callback`, and authenticates the user with the
+ * resulting JWT — the same way `Auth`'s `onSignIn` does for email/password.
+ */
+declare const AuthSocialSignInCallback: (props: AuthSocialSignInCallbackProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Auth, AuthProvider, type AuthScreen, AuthSocialSignInCallback, AuthSocialSignInCallbackProps, useAuth };

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import { Auth as Auth$1, AuthProvider as AuthProvider$1, useAuth as useAuth$1, useAuthScreen } from "@ttoss/react-auth-core";
 import { useNotifications } from "@ttoss/react-notifications";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/storage.ts
 var AUTH_STORAGE_REFRESH_TOKEN_KEY = "ttoss-strapi-auth-refresh-token";
@@ -118,6 +118,148 @@ var useAuth = () => {
 
 //#endregion
 //#region src/Auth.tsx
+var GENERIC_ERROR_MESSAGE$1 = "Unable to connect to the server. Please check your connection.";
+var signInWithEmail = async ({
+  apiUrl,
+  email,
+  password,
+  notifyError,
+  onUnconfirmedEmail
+}) => {
+  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) {
+    if (data.error?.message === "Your account email is not confirmed") {
+      await onUnconfirmedEmail();
+      return;
+    }
+    notifyError({
+      title: "Sign in failed",
+      message: data.error?.message || "An error occurred during sign in."
+    });
+    return;
+  }
+  storage.setRefreshToken(data.refreshToken);
+  return {
+    user: {
+      id: data.user.id,
+      email: data.user.email,
+      emailVerified: data.user.confirmed
+    },
+    tokens: {
+      accessToken: data.jwt,
+      refreshToken: data.refreshToken
+    },
+    isAuthenticated: true
+  };
+};
+var resendEmailConfirmation = async ({
+  apiUrl,
+  email,
+  notifyError
+}) => {
+  const response = await fetch(`${apiUrl}/auth/send-email-confirmation`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      email
+    })
+  });
+  if (!response.ok) {
+    notifyError({
+      title: "Resend confirmation email failed",
+      message: (await response.json()).error?.message || "An error occurred while resending the confirmation email."
+    });
+    return false;
+  }
+  return true;
+};
+var registerWithEmail = async ({
+  apiUrl,
+  email,
+  password,
+  notifyError
+}) => {
+  const response = await fetch(`${apiUrl}/auth/local/register`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      username: email,
+      email,
+      password
+    })
+  });
+  if (!response.ok) {
+    notifyError({
+      title: "Sign up failed",
+      message: (await response.json()).error?.message || "An error occurred during sign up."
+    });
+    return false;
+  }
+  return true;
+};
+var requestPasswordReset = async ({
+  apiUrl,
+  email,
+  notifyError
+}) => {
+  const response = await fetch(`${apiUrl}/auth/forgot-password`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      email
+    })
+  });
+  if (!response.ok) {
+    notifyError({
+      title: "Forgot password failed",
+      message: (await response.json()).error?.message || "An error occurred during forgot password."
+    });
+    return false;
+  }
+  return true;
+};
+var resetPasswordWithCode = async ({
+  apiUrl,
+  code,
+  newPassword,
+  notifyError
+}) => {
+  const response = await fetch(`${apiUrl}/auth/reset-password`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      code,
+      password: newPassword,
+      passwordConfirmation: newPassword
+    })
+  });
+  if (!response.ok) {
+    notifyError({
+      title: "Reset password failed",
+      message: (await response.json()).error?.message || "An error occurred during password reset."
+    });
+    return false;
+  }
+  return true;
+};
 var Auth = props => {
   const {
     setAuthData,
@@ -130,193 +272,124 @@ var Auth = props => {
   const {
     addNotification
   } = useNotifications();
+  const notifyError = React.useCallback(({
+    title,
+    message
+  }) => {
+    addNotification({
+      title,
+      message: message || GENERIC_ERROR_MESSAGE$1,
+      type: "error"
+    });
+  }, [addNotification]);
   const onSignIn = React.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) {
-        if (data.error?.message === "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) {
-            addNotification({
-              title: "Resend confirmation email failed",
-              message: (await resendResponse.json()).error?.message || "An error occurred while resending the confirmation email.",
-              type: "error"
-            });
-            return;
-          }
-          setScreen({
+      const authData = await signInWithEmail({
+        apiUrl,
+        email,
+        password,
+        notifyError,
+        onUnconfirmedEmail: async () => {
+          if (await resendEmailConfirmation({
+            apiUrl,
+            email,
+            notifyError
+          })) 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
       });
+      if (authData) setAuthData(authData);
     } catch {
-      addNotification({
-        title: "Network Error",
-        message: "Unable to connect to the server. Please check your connection.",
-        type: "error"
+      notifyError({
+        title: "Network Error"
       });
     }
-  }, [setAuthData, setScreen, addNotification, apiUrl]);
+  }, [setAuthData, setScreen, notifyError, apiUrl]);
   const onSignUp = React.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,
-          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({
+      if (await registerWithEmail({
+        apiUrl,
+        email,
+        password,
+        notifyError
+      })) setScreen({
         value: "confirmSignUpCheckEmail"
       });
     } catch {
-      addNotification({
-        title: "Network Error",
-        message: "Unable to connect to the server. Please check your connection.",
-        type: "error"
+      notifyError({
+        title: "Network Error"
       });
     }
-  }, [addNotification, setScreen, apiUrl]);
+  }, [setScreen, notifyError, apiUrl]);
   const onForgotPassword = React.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;
-      }
-      setScreen({
+      if (await requestPasswordReset({
+        apiUrl,
+        email,
+        notifyError
+      })) setScreen({
         value: "confirmResetPassword",
         context: {
           email
         }
       });
     } catch {
-      addNotification({
-        title: "Network Error",
-        message: "Unable to connect to the server. Please check your connection.",
-        type: "error"
+      notifyError({
+        title: "Network Error"
       });
     }
-  }, [addNotification, setScreen, apiUrl]);
+  }, [setScreen, notifyError, apiUrl]);
   const onForgotPasswordResetPassword = React.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) {
+      if (await resetPasswordWithCode({
+        apiUrl,
+        code,
+        newPassword,
+        notifyError
+      })) {
         addNotification({
-          title: "Reset password failed",
-          message: data.error?.message || "An error occurred during password reset.",
-          type: "error"
+          title: "Password reset successful",
+          message: "You can now sign in with your new password.",
+          type: "success"
+        });
+        setScreen({
+          value: "signIn"
         });
-        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"
+      notifyError({
+        title: "Network Error"
       });
     }
-  }, [addNotification, setScreen, apiUrl]);
+  }, [setScreen, notifyError, addNotification, apiUrl]);
   const onConfirmSignUpCheckEmail = React.useCallback(async () => {
     setScreen({
       value: "signIn"
     });
   }, [setScreen]);
+  const onSocialSignIn = React.useCallback(({
+    provider
+  }) => {
+    /**
+    * Kicks off Strapi's Users & Permissions provider flow. Strapi handles
+    * the OAuth exchange and redirects back to the frontend's configured
+    * redirect URL (e.g. `/connect/google/redirect`), which
+    * `AuthSocialSignInCallback` consumes.
+    */
+    window.location.href = `${apiUrl}/connect/${provider.toLowerCase()}`;
+  }, [apiUrl]);
   return /* @__PURE__ */jsx(Auth$1, {
     logo: props.logo,
     layout: props.layout,
@@ -326,9 +399,84 @@ var Auth = props => {
     onSignUp,
     onForgotPassword,
     onForgotPasswordResetPassword,
-    onConfirmSignUpCheckEmail
+    onConfirmSignUpCheckEmail,
+    socialProviders: props.socialProviders,
+    onSocialSignIn: props.socialProviders ? onSocialSignIn : void 0
+  });
+};
+
+//#endregion
+//#region src/AuthSocialSignInCallback.tsx
+var GENERIC_ERROR_MESSAGE = "An error occurred during social sign in.";
+var exchangeSocialSignInCallback = async ({
+  apiUrl,
+  provider
+}) => {
+  const response = await fetch(`${apiUrl}/auth/${provider}/callback${window.location.search}`);
+  const data = await response.json();
+  if (!response.ok) throw new Error(data.error?.message || GENERIC_ERROR_MESSAGE);
+  if (data.refreshToken) storage.setRefreshToken(data.refreshToken);
+  return {
+    user: {
+      id: data.user.id,
+      email: data.user.email,
+      emailVerified: data.user.confirmed
+    },
+    tokens: {
+      accessToken: data.jwt,
+      refreshToken: data.refreshToken
+    },
+    isAuthenticated: true
+  };
+};
+/**
+* Mount this at the redirect route configured in Strapi's provider settings
+* (e.g. `/connect/google/redirect`). It reads the callback query string
+* Strapi appended to the redirect, forwards it to
+* `${apiUrl}/auth/:provider/callback`, and authenticates the user with the
+* resulting JWT — the same way `Auth`'s `onSignIn` does for email/password.
+*/
+var AuthSocialSignInCallback = props => {
+  const {
+    provider,
+    onSuccess,
+    onError,
+    children
+  } = props;
+  const {
+    apiUrl,
+    setAuthData
+  } = useAuth();
+  const {
+    addNotification
+  } = useNotifications();
+  React.useEffect(() => {
+    let cancelled = false;
+    exchangeSocialSignInCallback({
+      apiUrl,
+      provider
+    }).then(authData => {
+      if (cancelled) return;
+      setAuthData(authData);
+      onSuccess?.();
+    }).catch(error => {
+      if (cancelled) return;
+      const message = error instanceof Error ? error.message : GENERIC_ERROR_MESSAGE;
+      addNotification({
+        title: "Sign in failed",
+        message,
+        type: "error"
+      });
+      onError?.(message);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiUrl, provider, setAuthData, addNotification, onSuccess, onError]);
+  return /* @__PURE__ */jsx(Fragment, {
+    children
   });
 };
 
 //#endregion
-export { Auth, AuthProvider, useAuth };
+export { Auth, AuthProvider, AuthSocialSignInCallback, useAuth };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth-strapi",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Authentication components and abstractions for React apps using Strapi.",
   "keywords": [
     "React",
@@ -41,16 +41,16 @@
     "tsdown": "^0.22.2",
     "@ttoss/config": "^1.38.0",
     "@ttoss/i18n-cli": "^0.9.0",
-    "@ttoss/react-auth-core": "^0.7.0",
-    "@ttoss/react-i18n": "^2.3.1",
-    "@ttoss/react-notifications": "^2.8.5",
+    "@ttoss/react-auth-core": "^0.7.1",
+    "@ttoss/react-notifications": "^2.8.6",
     "@ttoss/test-utils": "^4.2.19",
-    "@ttoss/ui": "^6.9.29"
+    "@ttoss/ui": "^6.9.30",
+    "@ttoss/react-i18n": "^2.3.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-auth-core": "^0.7.0",
-    "@ttoss/react-notifications": "^2.8.5",
+    "@ttoss/react-auth-core": "^0.7.1",
+    "@ttoss/react-notifications": "^2.8.6",
     "@ttoss/react-i18n": "^2.3.1"
   },
   "publishConfig": {