const { isAuthenticated } = useConvexAuth(); does not refresh in React Native
Hey convex people, It would be very much appreciated if we have a guide for convex auth on react native. By guide, I mean the middleware setup for _layout files and handle the navigation properly for file base navigation in react native. It will go a long way to improve the structure of our apps because I have just been winging it and it doesn't feel right.
Lately,
const { isAuthenticated } = useConvexAuth();
This hook doesn't refresh whenever I login until I restart my app and it updates the current state.
Please we really need a good guide for this. There's not much help out there for this and it used to work perfectly before.
Really looking forward to this guide. It could be on the docs or on the stack blog session. Thank you
9 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
The approach in the guide should work - I use RN, Expo, and file based routing with expo router. I don't believe Expo router supports middleware, let me know what you meant with that part.
isAuthenticated not updating is something I haven't seen before. Can you give a rough idea of your project structure, where the convex and auth providers are located and where you're calling the hook? Also the versions of Convex and Convex Auth you're using
ive gone thru the auth doc multiple times past few days and there's no such thing as
useConvexAuth hook. its probably coming from AI hallucination.
for react native you should use useAuthToken if you wanted to verify if user is authenticated or notuseConvexAuth is the way here, including for RN: https://docs.convex.dev/api/modules/react#useconvexauth
It's mostly highlighted in the docs for specific providers, eg., Clerk: https://docs.convex.dev/auth/clerk#logged-in-and-logged-out-viewsoh damn, i forgot about other auth provider 😅
Sorry for the late response.
So.. I lnow there are no middlewares in react native . But when I say middlewares, its just to guard my protected routes properly. I usually just use the isAuthenticated to determine which views are rendered from an index screen within a folder. For example, to determine if I want to render auth or client view, I have an index.tsx within the src directory and the check for isAuthenticated and route properly.
So I just believe there should be a better way to control this.
If there is none, I'm happy to stick with this because it works.
Yeah,... It wasn't like that before. isAuthenticated always updates initially.
For my project structure...
My convex folder is located in the base directory of the project. With my auth config which is like this:
import { Password } from "@convex-dev/auth/providers/Password";
import { convexAuth } from "@convex-dev/auth/server";
import { ResendOTP } from "./otp/ResendOTP";
export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
providers: [
ResendOTP,
Password,
Password({
verify: ResendOTP,
}),
],
});
Then for my files... Its something like this
- src
- auth
- index.tsx - This is where the whole registration and login logic lies
- dashboard
- index.tsx - Standard Protected view for only logged in users.
index.tsx
So... In my index, this is how I check for if the user is loggedIn or not:
const { isAuthenticated, isLoading } = useConvexAuth();
if(isLoading) {
return <Text>Loading View</View>
}
if (!isAuthenticated) {
return <Redirect href={"/auth"} />;
}
return <Redirect href={"/dashboard"} />;
The in my login logic in the auth/index.tsx
const { signIn } = useAuthActions();
const { isAuthenticated } = useConvexAuth();
// So I just skipped the sign in logic but basically, I just use this to check for the login successful and replace the stack
useEffect(() => {
if (isAuthenticated) {
router.replace("/");
}
}, [isAuthenticated]);
So this is like the rough sketch of my auth flow. I hope its easy for you to understand.
For versioning:
"@auth/core": "^0.37.4",
"@convex-dev/auth": "^0.0.80",
Thank you @erquhartTrying to figure out what the actual issue is here. Is isAuthenticated updating?
You mentioned skipping your sign in logic, but what you have looks really standard. I’d only add that folks typically do what you’re doing at the top of their app instead of on each route, but guessing there’s a reason you took this approach.
Hey @erquhart
I'm so sorry for my late response. My discord notifications haven't been working properly.
Yeah... I think I have fixed it. I made some mistakes and I tracked it kinda .
Now my apps are working well.
Thank you so much for your time
Great to hear!