How to update client component after server action was triggered?

I have a Next.js app and I'm using supabase for authentification.

In my navbar (which is a client component) I have a login button which should change to a welcome message after a successful login. I need this to be a client component so that it can still work with SSG.

The login happens as a server action which means once it triggers, the user is logged in but the client component doesn't know about it.

Is there any clean way to trigger the onAuthStateChange to pick up the login state change?

Vercel Staff

Hi , thanks for reaching out in the community.

I found the following code on https://supabase.com/docs/guides/auth/quickstarts/react and I think this should work as a client component. Can you try this logic?

Supabase Docs

Use Supabase Auth with React | Supabase Docs

Learn how to use Supabase Auth with React.js.

  import './index.css'
  import { useState, useEffect } from 'react'
  import { createClient } from '@supabase/supabase-js'
  import { Auth } from '@supabase/auth-ui-react'
  import { ThemeSupa } from '@supabase/auth-ui-shared'

  const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')

  export default function WelcomeComponent() {
    const [session, setSession] = useState(null)

    useEffect(() => {
      supabase.auth.getSession().then(({ data: { session } }) => {
        setSession(session)
      })

      const {
        data: { subscription },
      } = supabase.auth.onAuthStateChange((_event, session) => {
        setSession(session)
      })

      return () => subscription.unsubscribe()
    }, [])

    if (!session) {
      return (null)
    }
    else {
      return (<div>Welcome message!</div>)
    }
  }

The problem is if a server action triggers the session change, the client component won't know about it as they are completely separated. I'm wondering how can I let the client component know that the user or session has been altered. Initially I tried to pass it as a prop to the client component but that breaks SSG

Vercel Staff

Hi , oh I see. I thought the onAuthStateChange event is triggered anyways.

If you need more help, please share your public repo or a minimal reproducible example. That will let us all work together from the same code to figure out what’s going wrong.

, certainly!

Here's what I tried:

User logs in -> Server action is triggered -> Returns success message -> Trigger a refresh (here it breaks)

The data seems fine in all server components, they instantly get updated but the header client component doesn't

Client side header component:

export default function HeaderAuth() {
    const [user, setUser] = useState<User | null>(null);
    const [loading, setLoading] = useState(true);
    const router = useRouter()
    const supabase = createClient(); // client side

    useEffect(() => {

        const checkSession = async () => {
            const { data: { session } } = await supabase.auth.getSession();
            console.log("Initial session check:", session); // Debug log
            setUser(session?.user ?? null);
            setLoading(false);
        };

        const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
            console.log("Auth state changed:", event, session); // Debug log
            setUser(session?.user ?? null);
            setLoading(false);
        });

        checkSession();

        return () => {
            subscription.unsubscribe();
        };
    }, []);

    const handleLogout = async () => {
        const result = await logout()
        if (result.success) {
            setUser(null)
            router.push("/")
            router.refresh()
        } else {
            console.error("Logout failed:", result.error)
        }
    }

    return (
        <div>
            {user ? (
                <div>
                    <span>Hello, {user.email}!</span>
                    <button onClick={handleLogout}>Logout</button>
                </div>
            ) : (
                <Link href="/login">
                    <LogInIcon className="mr-2" /> Log in
                </Link>
            )}
        </div>
    )
}

export async function login(prevState: { error: string | null; success: boolean }, formData: FormData) {
  const supabase = await createClient()

  // type-casting here for convenience
  // in practice, you should validate your inputs
  const data = {
    email: formData.get('email') as string,
    password: formData.get('password') as string,
  }

  const { error } = await supabase.auth.signInWithPassword(data)

  if (error) {
    return { error: error.message, success: false }
  }
  revalidatePath('/', 'layout')
  return { error: null, success: true }

}

"use client"
import { useActionState, useEffect } from 'react'
import { login, signup } from './actions'
import { useRouter } from 'next/navigation'
export default function LoginPage() {

  const [state, formAction, isPending] = useActionState(login, { error: null, success: false })
  const router = useRouter()

  useEffect(() => {
    if (state?.success) {
      router.push("/private")
      router.refresh();
    }
  }, [state, router])

  return (
    <form action={formAction}>
      <label htmlFor="email">Email:</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="password">Password:</label>
      <input id="password" name="password" type="password" required />
      <button>Log in</button>
      {/* <button formAction={signup}>Sign up</button> */}
      {state?.error && <p className="error">{state.error}</p>}
      {isPending && <p>Please wait...</p>}

    </form>
  )
}

Vercel Staff

Hi , thanks for sharing the code. Have you tried using the redirect function in the login server action to redirect the user to /private directly on success?

Yes, Here is a simplified example:

Server action:

export async function login(formData: FormData) {
  const supabase = await createClient()
  const data = {
    email: formData.get('email') as string,
    password: formData.get('password') as string,
  }
  const { error } = await supabase.auth.signInWithPassword(data)
  if (error) {
    redirect('/error')
  }
  revalidatePath('/', 'layout')
  redirect('/private')
}

"use client"
import { login} from './actions'
export default function LoginPage() {
  return (
    <form >
      <label htmlFor="email">Email:</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="password">Password:</label>
      <input id="password" name="password" type="password" required />
      <button formAction={login}>Log in</button>
    </form>
  )
}

What happens is when the user logs in -> the redirect kicks in and loads the /private route where I can see the correct user data inside the server component, however this does not seem to refresh the Header component which is still unaware of the user being logged in. If i hard refresh the page by pressing F5, or use alt-tab on the browser window, then it's working.

I was able to fix it by creating a context around the app for the user. And then changing the login server action to return the user:

export async function login(formData: FormData) {
  const supabase = await createClient()
  const data = {
    email: formData.get('email') as string,
    password: formData.get('password') as string,
  }
  const { data: authData, error } = await supabase.auth.signInWithPassword(data)
  if (error) {
    throw new Error(error.message)
  }
  revalidatePath('/')
  return authData.session?.user || null
}

And then on the login page which is client side, update the user:

"use client"
import { login } from "./actions"
import { useRouter } from "next/navigation"
import { useUser } from "@/context/UserContext"

export default function LoginPage() {
  const router = useRouter()
  const { setUser } = useUser()

  async function handleSubmit(formData: FormData) {
    const loggedInUser = await login(formData) // Modify login to return user
    if (loggedInUser) {
      setUser(loggedInUser)
      router.refresh()      // Force the header to re-check session
      router.push("/private")
    } else {
      // Handle login error if needed
    }
  }

  return (
    <form onSubmit={async (e) => {
      e.preventDefault()
      await handleSubmit(new FormData(e.currentTarget))
    }}>
      <label htmlFor="email">Email:</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="password">Password:</label>
      <input id="password" name="password" type="password" required />
      <button type="submit">Log in</button>
    </form>
  )
}

This topic is closed. It no longer accepts new replies.

import './index.css' import { useState, useEffect } from 'react' import { createClient } from '@supabase/supabase-js' import { Auth } from '@supabase/auth-ui-react' import { ThemeSupa } from '@supabase/auth-ui-shared' const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>') export default function WelcomeComponent() { const [session, setSession] = useState(null) useEffect(() => { supabase.auth.getSession().then(({ data: { session } }) => { setSession(session) }) const { data: { subscription }, } = supabase.auth.onAuthStateChange((_event, session) => { setSession(session) }) return () => subscription.unsubscribe() }, []) if (!session) { return (null) } else { return (<div>Welcome message!</div>) } }

export default function HeaderAuth() { const [user, setUser] = useState<User | null>(null); const [loading, setLoading] = useState(true); const router = useRouter() const supabase = createClient(); // client side useEffect(() => { const checkSession = async () => { const { data: { session } } = await supabase.auth.getSession(); console.log("Initial session check:", session); // Debug log setUser(session?.user ?? null); setLoading(false); }; const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => { console.log("Auth state changed:", event, session); // Debug log setUser(session?.user ?? null); setLoading(false); }); checkSession(); return () => { subscription.unsubscribe(); }; }, []); const handleLogout = async () => { const result = await logout() if (result.success) { setUser(null) router.push("/") router.refresh() } else { console.error("Logout failed:", result.error) } } return ( <div> {user ? ( <div> <span>Hello, {user.email}!</span> <button onClick={handleLogout}>Logout</button> </div> ) : ( <Link href="/login"> <LogInIcon className="mr-2" /> Log in </Link> )} </div> ) }

export async function login(prevState: { error: string | null; success: boolean }, formData: FormData) { const supabase = await createClient() // type-casting here for convenience // in practice, you should validate your inputs const data = { email: formData.get('email') as string, password: formData.get('password') as string, } const { error } = await supabase.auth.signInWithPassword(data) if (error) { return { error: error.message, success: false } } revalidatePath('/', 'layout') return { error: null, success: true } }

"use client" import { useActionState, useEffect } from 'react' import { login, signup } from './actions' import { useRouter } from 'next/navigation' export default function LoginPage() { const [state, formAction, isPending] = useActionState(login, { error: null, success: false }) const router = useRouter() useEffect(() => { if (state?.success) { router.push("/private") router.refresh(); } }, [state, router]) return ( <form action={formAction}> <label htmlFor="email">Email:</label> <input id="email" name="email" type="email" required /> <label htmlFor="password">Password:</label> <input id="password" name="password" type="password" required /> <button>Log in</button> {/* <button formAction={signup}>Sign up</button> */} {state?.error && <p className="error">{state.error}</p>} {isPending && <p>Please wait...</p>} </form> ) }

export async function login(formData: FormData) { const supabase = await createClient() const data = { email: formData.get('email') as string, password: formData.get('password') as string, } const { error } = await supabase.auth.signInWithPassword(data) if (error) { redirect('/error') } revalidatePath('/', 'layout') redirect('/private') }

"use client" import { login} from './actions' export default function LoginPage() { return ( <form > <label htmlFor="email">Email:</label> <input id="email" name="email" type="email" required /> <label htmlFor="password">Password:</label> <input id="password" name="password" type="password" required /> <button formAction={login}>Log in</button> </form> ) }

export async function login(formData: FormData) { const supabase = await createClient() const data = { email: formData.get('email') as string, password: formData.get('password') as string, } const { data: authData, error } = await supabase.auth.signInWithPassword(data) if (error) { throw new Error(error.message) } revalidatePath('/') return authData.session?.user || null }

"use client" import { login } from "./actions" import { useRouter } from "next/navigation" import { useUser } from "@/context/UserContext" export default function LoginPage() { const router = useRouter() const { setUser } = useUser() async function handleSubmit(formData: FormData) { const loggedInUser = await login(formData) // Modify login to return user if (loggedInUser) { setUser(loggedInUser) router.refresh() // Force the header to re-check session router.push("/private") } else { // Handle login error if needed } } return ( <form onSubmit={async (e) => { e.preventDefault() await handleSubmit(new FormData(e.currentTarget)) }}> <label htmlFor="email">Email:</label> <input id="email" name="email" type="email" required /> <label htmlFor="password">Password:</label> <input id="password" name="password" type="password" required /> <button type="submit">Log in</button> </form> ) }