feat: add isInitialized flag (#30)

* feat: add isInitialized flag

add isInitialized flag

* fix: update workflow

update ci workflow

Author: simeng-li

.github/workflows/commitlint.yml

@@ -4,7 +4,7 @@ on:
   pull_request:
     types: [opened, edited, synchronize, reopened]
 
-concurrency: 
+concurrency:
   group: commitlint-${{ github.ref }}
   cancel-in-progress: true
 
@@ -17,7 +17,7 @@ jobs:
           fetch-depth: 0
 
       - name: Setup Node and pnpm
-        uses: silverhand-io/actions-node-pnpm-run-steps@v4
+        uses: silverhand-io/actions-node-pnpm-run-steps@v5
         with:
           pnpm-version: 9
 

.github/workflows/main.yml

@@ -19,7 +19,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Setup Node and pnpm
-        uses: silverhand-io/actions-node-pnpm-run-steps@v4
+        uses: silverhand-io/actions-node-pnpm-run-steps@v5
         with:
           pnpm-version: 9
 

packages/rn-sample/App.tsx

@@ -9,18 +9,18 @@ const endpoint = 'https://<your-logto-endpoint>';
 const appId = '<your-app-id>';
 
 const Content = () => {
-  const { signIn, signOut, client, isAuthenticated, getIdTokenClaims } = useLogto();
+  const { signIn, signOut, client, isAuthenticated, isInitialized, getIdTokenClaims } = useLogto();
   const [claims, setClaims] = useState<IdTokenClaims>();
 
   useEffect(() => {
     const get = async () => {
       setClaims(await getIdTokenClaims());
     };
 
-    if (isAuthenticated) {
+    if (isInitialized && isAuthenticated) {
       void get();
     }
-  }, [isAuthenticated, getIdTokenClaims]);
+  }, [isAuthenticated, getIdTokenClaims, isInitialized]);
 
   return (
     <View style={styles.container}>

packages/rn/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

packages/rn/src/context.ts

@@ -4,6 +4,13 @@ import type { LogtoClient } from './client';
 
 export type LogtoContextProps = {
   client: LogtoClient;
+  /**
+   * Indicates if the client is initialized.
+   *
+   * - `true`: The client is initialized, and the authentication state is fetched.
+   * - `false`: The client is not initialized.
+   */
+  isInitialized: boolean;
   isAuthenticated: boolean;
   setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>;
 };
@@ -15,6 +22,7 @@ export const throwContextError = (): never => {
 export const LogtoContext = createContext<LogtoContextProps>({
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   client: undefined!,
+  isInitialized: false,
   isAuthenticated: false,
   setIsAuthenticated: throwContextError,
 });

packages/rn/src/hooks.ts

@@ -11,7 +11,7 @@ import { LogtoContext } from './context';
  * `LogtoProvider` component to wrap the root component of the app.
  */
 export const useLogto = () => {
-  const { client, isAuthenticated, setIsAuthenticated } = useContext(LogtoContext);
+  const { client, isAuthenticated, setIsAuthenticated, isInitialized } = useContext(LogtoContext);
 
   useEffect(() => {
     // This is required to handle the redirect from the browser on a web-based expo app
@@ -45,6 +45,10 @@ export const useLogto = () => {
        * tokens are valid.
        */
       isAuthenticated,
+      /**
+       * Indicates if the client is initialized and the authentication state is retrieved from the storage.
+       */
+      isInitialized,
       /** @see {@link LogtoClient.getRefreshToken} */
       getRefreshToken: client.getRefreshToken.bind(client),
       /** @see {@link LogtoClient.getAccessToken} */
@@ -66,7 +70,7 @@ export const useLogto = () => {
       /** @see {@link LogtoClient.fetchUserInfo} */
       fetchUserInfo: client.fetchUserInfo.bind(client),
     }),
-    [client, isAuthenticated, signIn, signOut]
+    [client, isAuthenticated, isInitialized, signIn, signOut]
   );
 
   return memorized;

packages/rn/src/provider.tsx

@@ -16,22 +16,26 @@ export type LogtoProviderProps = {
 export const LogtoProvider = ({ config, children }: LogtoProviderProps) => {
   const memorizedLogtoClient = useMemo(() => new LogtoClient(config), [config]);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
 
   useEffect(() => {
     (async () => {
       const isAuthenticated = await memorizedLogtoClient.isAuthenticated();
-
       setIsAuthenticated(isAuthenticated);
+
+      // Mark the client as initialized.
+      setIsInitialized(true);
     })();
   }, [memorizedLogtoClient]);
 
   const memorizedContextValue = useMemo(
     () => ({
       client: memorizedLogtoClient,
       isAuthenticated,
+      isInitialized,
       setIsAuthenticated,
     }),
-    [memorizedLogtoClient, isAuthenticated]
+    [memorizedLogtoClient, isAuthenticated, isInitialized]
   );
 
   return <LogtoContext.Provider value={memorizedContextValue}>{children}</LogtoContext.Provider>;