fix: trigger onAuthenticated on first mount

examples/basic-nextjs/src/app/authors/page.tsx

@@ -4,6 +4,7 @@ import Fallback from '@/components/Fallback';
 import { getRowndUser } from '../../../../../src/next/server';
 import { withRowndRequireSignIn } from '../../../../../src/next';
 import { cookies } from 'next/headers';
+import Link from 'next/link';
 
 async function Authors() {
   const data = await fetch('https://jsonplaceholder.typicode.com/posts');
@@ -14,6 +15,7 @@ async function Authors() {
     <div className="flex justify-center flex-col w-50 ">
       <h1 className="text-2xl font-bold">Authors</h1>
       <h3>User ID: {JSON.stringify(user, null, 2)}</h3>
+      <Link href="/">Home</Link>
       <Fallback />
       <ul className="flex flex-col list-disc">
       {posts

examples/basic/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "@rownd/react": "file:../../packages/react/rownd-react-2.2.2.tgz",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

examples/basic/src/App.tsx

@@ -4,6 +4,7 @@ import {
   useRownd,
 } from '../../../src/context/index';
 import './App.css';
+import { Link } from 'react-router-dom';
 
 const Initializing = () => <h1>Initializing...</h1>;
 
@@ -23,6 +24,7 @@ function App() {
   return (
     <RequireSignIn initializing={<Initializing />}>
       <h1>Rownd sample app</h1>
+      <Link to="/profile">Go to profile</Link>
       <button onClick={() => signOut()}>Sign out</button>
     </RequireSignIn>
   );

examples/basic/src/main.tsx

@@ -3,11 +3,31 @@ import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
 import { RowndProvider } from '../../../src/context/index';
+import {
+  createBrowserRouter,
+  Link,
+  RouterProvider,
+} from "react-router-dom";
+
+const Profile: React.FC = () => {
+  return <Link to="/">Go back</Link>;
+};
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+  },
+  {
+    path: "/profile",
+    element: <Profile />,
+  }
+]);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <RowndProvider appKey="key_nmdccn7goxjch5s0hoholrh9">
-      <App />
+      <RouterProvider router={router} />
     </RowndProvider>
   </React.StrictMode>
 );

examples/remix/app/entry.server.tsx

@@ -11,7 +11,7 @@ import { createReadableStreamFromReadable } from '@remix-run/node';
 import { RemixServer } from '@remix-run/react';
 import { isbot } from 'isbot';
 import { renderToPipeableStream } from 'react-dom/server';
-import { withRowndHandleRequest } from '../../../src/remix';
+import { withRowndHandleRequest } from '../../../src/remix/index';
 
 const ABORT_DELAY = 5_000;
 

examples/remix/app/root.tsx

@@ -9,7 +9,7 @@ import {
 import type { LinksFunction } from '@remix-run/node';
 
 import './tailwind.css';
-import { RemixRowndProvider } from '../../../src/remix';
+import { RemixRowndProvider } from '../../../src/remix/index';
 
 export const loader = async (): Promise<{
   env: {

examples/remix/app/routes/_index.tsx

@@ -1,6 +1,6 @@
 import type { MetaFunction } from '@remix-run/node';
 import { useNavigate } from '@remix-run/react';
-import { useRownd } from '../../../../src/remix';
+import { useRownd } from '../../../../src/remix/index';
 import { useEffect } from 'react';
 
 export const meta: MetaFunction = () => {

examples/remix/app/routes/books/index.tsx

@@ -4,7 +4,7 @@ import {
   useRownd,
   withRowndLoader,
   withRowndRequireSignIn,
-} from '../../../../../src/remix';
+} from '../../../../../src/remix/index';
 
 import { isAuthenticated, getRowndUser, getRowndUserId } from '../../../../../src/remix/server';
 

examples/remix/app/routes/profile/index.tsx

@@ -4,7 +4,7 @@ import {
   useRownd,
   withRowndRequireSignIn,
   withRowndLoader,
-} from '../../../../../src/remix';
+} from '../../../../../src/remix/index';
 
 type LoaderResponse = {
   user_id: string;

src/context/RowndContext.tsx

@@ -1,5 +1,10 @@
-import React, { useContext, createContext } from 'react';
-import { TRowndContext } from './types';
+import React, {
+  useContext,
+  createContext,
+  useRef,
+  useCallback,
+} from 'react';
+import { TRowndContext, Unsubscribe, UserDataContext } from './types';
 
 export const RowndContext = createContext<TRowndContext | undefined>(undefined);
 
@@ -25,7 +30,30 @@ function useRownd(): TRowndContext {
     throw new Error('useRownd must be used within a RowndProvider');
   }
 
-  return context;
+  // If the user is authenticated on the first mount, we want to call the callback immediately
+  const isFirstMount = useRef(true);
+  const onAuthenticated = useCallback(
+    (callback: (userData: UserDataContext) => void): Unsubscribe => {
+      if (
+        context.is_authenticated &&
+        !context.is_initializing &&
+        context.user.data.user_id &&
+        isFirstMount.current
+      ) {
+        callback(context.user.data);
+        isFirstMount.current = false;
+        return () => {};
+      }
+      isFirstMount.current = false;
+      return context.onAuthenticated(callback);
+    },
+    [context.is_authenticated, context.is_initializing, context.user?.data?.user_id]
+  );
+
+  return {
+    ...context,
+    onAuthenticated,
+  };
 }
 
 export { useRownd };

src/context/types.ts

@@ -1,6 +1,6 @@
 type AuthLevel = 'instant' | 'guest' | 'unverified' | 'verified';
 
-type Unsubscribe = () => void;
+export type Unsubscribe = () => void;
 
 export type TRowndContext = {
   requestSignIn: (e?: SignInProps) => void;

src/next/client/useRownd.tsx

@@ -1,17 +1,29 @@
+'use client';
+
 import { useStore } from './store/useStore';
 import { store } from './store';
 import { TRowndContext, UserDataContext } from '../../context/types';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { setCookie } from '../../ssr/server/cookie';
 import { addOnAuthenticatedListener, unsubscribeOnAuthenticatedListener } from '../../utils/listeners';
 
 export const useRownd = (): TRowndContext => {
   const state = useStore(store, (x) => x);
 
+  const isFirstMount = useRef(true);
   const onAuthenticated: (
     callback: (userData: UserDataContext) => void
   ) => () => void = useCallback(
     (callback: (userData: UserDataContext) => void) => {
+
+      // If the user is authenticated on the first mount, we want to call the callback immediately
+      if (state.is_authenticated && !state.is_initializing && Boolean(state.user.data.user_id) && isFirstMount.current) {
+        callback(state.user.data);
+        isFirstMount.current = false;
+        return () => {};
+      }
+
+      isFirstMount.current = false;
       const id = addOnAuthenticatedListener(callback);
 
       const unsubscribe = () => {
@@ -20,7 +32,7 @@ export const useRownd = (): TRowndContext => {
 
       return unsubscribe;
     },
-    []
+    [state.is_authenticated, state.is_initializing, state.user?.data?.user_id]
   );
 
   const memoized = useMemo(() => {