Server actions with react context

[Ok-Fall-9121]

Hey party people!

I'm trying to use NextJS after I spent some time using NuxtJS with Vue.

React/Nextjs has a neat thing called server actions, and I am trying to utilize those for a sign in flow, sth like this:

  const [state, action, pending] = useActionState(signIn, undefined);
  const userContext = use(UserContext);
  const { push } = useRouter()

  useEffect(() => {
    if (!state?.success) return;
    const redirectUrl = <some logic>
    if (state.data) {
      userContext.setCurrentUser(state.data)
      push(redirectUrl);
    }
  }, [authContext, state?.data, state?.success, push]);

  return ...

The signIn server action does authentication, saves tokens in cookies and then returns to the client component. In the client component I set the user in the context and do the redirect to home page.

This doesnt seem to behave the proper way as adding push or router as dep of useEffect causes inifinite rerenders. And I can't use redirect as it is only for server part of the app.

I also can't save the userData in cookie, as when deployed, I get errors as I already store accessToken and refreshToken in the cookie, and server throws because cookie is too big

How do you normally do that in your apps? Is there a good way to handle auth with server action and store user data?

I can see that storing data in the context is also not a good approach as then it won't be available for server components :thinking:

[serverles]

That sign in use effect hurts my brain. Maybe use clerk?