@frontegg/react-hooks 6.147.0-alpha.2 → 6.147.0-alpha.4

package/auth/hooks.d.ts

@@ -7,6 +7,19 @@ export declare type AuthMapper = {
 };
 export declare type StateHookFunction<T> = (() => T) & (<S extends {}>(mapper: (state: T) => S) => S);
 export declare type AuthStateMapper<S> = (state: AuthState) => S;
+/**
+ * Use this `frontegg` hook function to obtain the complete authentication state, if it exists.
+ *
+ * ```jsx
+ * export const MyFunctionComponent = () => {
+ *   const { isAuthenticated, user } = useAuth();
+ *
+ *   return isAuthenticated ? <div>Hello, User {user.name}</div> : null;
+ * }
+ * ```
+ *
+ * You can also utilize other `frontegg` hooks like `useAuthUser` to specifically retrieve the user and redirect to the login page if necessary, `useAuthUserOrNull` to get the user if available, and `useIsAuthenticated` for checking authentication status.
+ */
 export declare function useAuth(): AuthState;
 export declare function useAuth<S>(stateMapper: AuthStateMapper<S>): S;
 /**
@@ -24,7 +37,16 @@ export declare function useAuth<S>(stateMapper: AuthStateMapper<S>): S;
  * }
  * ```
  *
- * use this frontegg hook function to get if user is "Authenticated"
+ /**
+ * Use this frontegg hook function to redirect the user to the login page when in hosted login mode.
+ * If the user is already authenticated, this method will direct the user to the store, and you can retrieve user information using the `useAuthUserOrNull` method.
+ *
+ * To ensure the user is available on the first page load when authenticated, configure this option in your `FronteggProvider`:
+ * `authOptions`:
+ *   `hostedLoginOptions`:
+ *     `loadUserOnFirstLoad: true`
+ *
+ * When using this option, you can have the user on the first load, and you can control when the user is redirected to the login page by using `loginWithRedirect`.
  */
 export declare const useLoginWithRedirect: () => AuthActions['requestHostedLoginAuthorize'];
 export declare const useAuthActions: () => AuthActions;
@@ -49,10 +71,20 @@ export declare const useIsAuthenticated: () => boolean;
  * }
  * ```
  *
- * use this frontegg hook function to get the authenticated user
- * the return user is null if not authenticated
+ * Use this `frontegg` hook function to obtain the authenticated user. If the user is not authenticated, this method will immediately redirect the user to the login page. (Primarily intended for embedded mode usage)
+ * To prevent this immediate redirection behavior, use the `useAuthUserOrNull` method.
  */
 export declare const useAuthUser: () => User;
+/**
+ * ```jsx
+ * export const MyFunctionComponent = () => {
+ *   const user = useAuthUserOrNull();
+ *   return user ? <div>Hello {user.name}!</div> : <div>Hello Guest!</div>
+ * }
+ * ```
+ *
+ * Use this `frontegg` hook function to retrieve the authenticated user. If the user is not authenticated, this hook will return null. To redirect the user to the login page in case they are not authenticated, use the `useAuthUser` method.
+ */
 export declare const useAuthUserOrNull: () => User | null;
 /**
  * hooks helpers

package/auth/hooks.js

@@ -10,6 +10,21 @@ const defaultMapper = {
   state: state => state,
   actions: actions => actions
 };
+
+/**
+ * Use this `frontegg` hook function to obtain the complete authentication state, if it exists.
+ *
+ * ```jsx
+ * export const MyFunctionComponent = () => {
+ *   const { isAuthenticated, user } = useAuth();
+ *
+ *   return isAuthenticated ? <div>Hello, User {user.name}</div> : null;
+ * }
+ * ```
+ *
+ * You can also utilize other `frontegg` hooks like `useAuthUser` to specifically retrieve the user and redirect to the login page if necessary, `useAuthUserOrNull` to get the user if available, and `useIsAuthenticated` for checking authentication status.
+ */
+
 export function useAuth(stateMapper = defaultMapper.state) {
   return useSelector(state => stateMapper(state[authStoreName]), shallowEqual);
 }
@@ -29,7 +44,16 @@ export function useAuth(stateMapper = defaultMapper.state) {
  * }
  * ```
  *
- * use this frontegg hook function to get if user is "Authenticated"
+ /**
+ * Use this frontegg hook function to redirect the user to the login page when in hosted login mode.
+ * If the user is already authenticated, this method will direct the user to the store, and you can retrieve user information using the `useAuthUserOrNull` method.
+ *
+ * To ensure the user is available on the first page load when authenticated, configure this option in your `FronteggProvider`:
+ * `authOptions`:
+ *   `hostedLoginOptions`:
+ *     `loadUserOnFirstLoad: true`
+ *
+ * When using this option, you can have the user on the first load, and you can control when the user is redirected to the login page by using `loginWithRedirect`.
  */
 export const useLoginWithRedirect = () => {
   const dispatch = useDispatch();
@@ -70,8 +94,8 @@ export const useIsAuthenticated = () => useSelector(({
  * }
  * ```
  *
- * use this frontegg hook function to get the authenticated user
- * the return user is null if not authenticated
+ * Use this `frontegg` hook function to obtain the authenticated user. If the user is not authenticated, this method will immediately redirect the user to the login page. (Primarily intended for embedded mode usage)
+ * To prevent this immediate redirection behavior, use the `useAuthUserOrNull` method.
  */
 export const useAuthUser = () => {
   const {
@@ -90,6 +114,17 @@ export const useAuthUser = () => {
   }
   return user || noUser;
 };
+
+/**
+ * ```jsx
+ * export const MyFunctionComponent = () => {
+ *   const user = useAuthUserOrNull();
+ *   return user ? <div>Hello {user.name}!</div> : <div>Hello Guest!</div>
+ * }
+ * ```
+ *
+ * Use this `frontegg` hook function to retrieve the authenticated user. If the user is not authenticated, this hook will return null. To redirect the user to the login page in case they are not authenticated, use the `useAuthUser` method.
+ */
 export const useAuthUserOrNull = () => {
   const {
     user

package/index.js

@@ -1,4 +1,4 @@
-/** @license Frontegg v6.147.0-alpha.2
+/** @license Frontegg v6.147.0-alpha.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/auth/hooks.js

@@ -18,6 +18,21 @@ const defaultMapper = {
   state: state => state,
   actions: actions => actions
 };
+
+/**
+ * Use this `frontegg` hook function to obtain the complete authentication state, if it exists.
+ *
+ * ```jsx
+ * export const MyFunctionComponent = () => {
+ *   const { isAuthenticated, user } = useAuth();
+ *
+ *   return isAuthenticated ? <div>Hello, User {user.name}</div> : null;
+ * }
+ * ```
+ *
+ * You can also utilize other `frontegg` hooks like `useAuthUser` to specifically retrieve the user and redirect to the login page if necessary, `useAuthUserOrNull` to get the user if available, and `useIsAuthenticated` for checking authentication status.
+ */
+
 function useAuth(stateMapper = defaultMapper.state) {
   return (0, _FronteggStoreContext.useSelector)(state => stateMapper(state[_reduxStore.authStoreName]), _reactRedux.shallowEqual);
 }
@@ -37,7 +52,16 @@ function useAuth(stateMapper = defaultMapper.state) {
  * }
  * ```
  *
- * use this frontegg hook function to get if user is "Authenticated"
+ /**
+ * Use this frontegg hook function to redirect the user to the login page when in hosted login mode.
+ * If the user is already authenticated, this method will direct the user to the store, and you can retrieve user information using the `useAuthUserOrNull` method.
+ *
+ * To ensure the user is available on the first page load when authenticated, configure this option in your `FronteggProvider`:
+ * `authOptions`:
+ *   `hostedLoginOptions`:
+ *     `loadUserOnFirstLoad: true`
+ *
+ * When using this option, you can have the user on the first load, and you can control when the user is redirected to the login page by using `loginWithRedirect`.
  */
 const useLoginWithRedirect = () => {
   const dispatch = (0, _FronteggStoreContext.useDispatch)();
@@ -82,8 +106,8 @@ const useIsAuthenticated = () => (0, _FronteggStoreContext.useSelector)(({
  * }
  * ```
  *
- * use this frontegg hook function to get the authenticated user
- * the return user is null if not authenticated
+ * Use this `frontegg` hook function to obtain the authenticated user. If the user is not authenticated, this method will immediately redirect the user to the login page. (Primarily intended for embedded mode usage)
+ * To prevent this immediate redirection behavior, use the `useAuthUserOrNull` method.
  */
 exports.useIsAuthenticated = useIsAuthenticated;
 const useAuthUser = () => {
@@ -103,6 +127,17 @@ const useAuthUser = () => {
   }
   return user || noUser;
 };
+
+/**
+ * ```jsx
+ * export const MyFunctionComponent = () => {
+ *   const user = useAuthUserOrNull();
+ *   return user ? <div>Hello {user.name}!</div> : <div>Hello Guest!</div>
+ * }
+ * ```
+ *
+ * Use this `frontegg` hook function to retrieve the authenticated user. If the user is not authenticated, this hook will return null. To redirect the user to the login page in case they are not authenticated, use the `useAuthUser` method.
+ */
 exports.useAuthUser = useAuthUser;
 const useAuthUserOrNull = () => {
   const {

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license Frontegg v6.147.0-alpha.2
+/** @license Frontegg v6.147.0-alpha.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@frontegg/react-hooks",
-  "version": "6.147.0-alpha.2",
+  "version": "6.147.0-alpha.4",
   "main": "./node/index.js",
   "license": "MIT",
   "author": "Frontegg LTD",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@frontegg/redux-store": "6.147.0-alpha.2",
-    "@frontegg/types": "6.147.0-alpha.2",
+    "@frontegg/redux-store": "6.147.0-alpha.4",
+    "@frontegg/types": "6.147.0-alpha.4",
     "@types/react": "*",
     "get-value": "^3.0.1",
     "react-redux": "^7.x"