check authenticated user in client components

[Amir-Zouerami]

Hi, Well done with this library!

Ho do I check If a user is authenticated in a client component? I believe next/headers only works in server components.

[pilcrowOnPaper]

Pass the current session/user as a prop, and possibly maybe use a context within said client component?

[Amir-Zouerami]

So that means there's no way for me to do this directly inside a client component like getServerSession in next-auth, right?

[pilcrowOnPaper]

Well you can create an /api/user endpoint that returns the current user, but you'll have to implement it by yourself

[Amir-Zouerami]

understood. I thought there might be an API for that already. Thank you.

[WTanardi]

hi @Amir-Zouerami have you implemented it successfully? If so can you show me the api endpoint please

[Amir-Zouerami]

@WTanardi sorry for the late reply. No, I did not implement it. I went with something else. I don't even remember this conversation :))). I did not end up using lucia at the time because of all the shenanigans of next.js back then. I don't know how lucia is now though.

[AugustoTI]

@pilcrowOnPaper @WTanardi @Amir-Zouerami

Hello! If the text is strange, I'm using Google Translate because my English isn't very good 😅

Well, I made this implementation similar to the way we use in NextAuth

// src/lib/lucia.ts
export interface SessionData {
  user: User | null
  session: Session | null
}

// src/components/providers/session-provider.tsx
'use client'

import * as React from 'react'

import { type SessionData } from '@/lib/lucia'

const SessionContext = React.createContext({} as SessionData)

interface SessionProviderProps {
  session: SessionData
  children: React.ReactNode
}

export function SessionProvider({ children, session }: SessionProviderProps) {
  return <SessionContext.Provider value={session}>{children}</SessionContext.Provider>
}

export const useSession = () => React.useContext(SessionContext)

// src/components/client-component.tsx
'use client'

// Server Actions
import { logoutUser } from '@/actions/auth.actions'

import { useSession } from '@/components/providers/session-provider''

export function MenuUser() {
  const { user } = useSession()

  return (
    <div>
      <h1>Welcome again {user?.username}</h1>
      <button onClick={() => logoutUser()}>Logout</Button>
    </div>
  )
}

I don't know if it's the best way or if there's a problem with exposing some data on the client (for example, the session), but it worked for me here

[rwieruch]

"use client";

import { User } from "lucia";
import { useEffect, useState } from "react";
import { validateRequest } from "@/features/auth/queries/validate-request";

const Header = () => {
  // const { user } = await validateRequest(); // <--- server component approach

  // client component approach v
 
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    const fetchUser = async () => {
      const { user } = await validateRequest();
      setUser(user);
    };

    fetchUser();
  }, []);

  ...
};

Whereas validateRequest is the recommended Lucia implementation from the documentation: https://lucia-auth.com/tutorials/github-oauth/nextjs-app

But you will get the typically SPA flicker.

[bdrtsky]

Updated the comment.

This will not work in "use client" component, hence pretty useless. Did you even tried it before posting 😁 @rwieruch

[rwieruch]

Why would this not work if you annotate the file where validateRequest is defined with "use server";?

Edit: And yes, I tried and it works for my application.

[startup-engineer]

Ayy @rwieruch big fan of your guides, thanks for posting this - I literally was just looking for a client side solution here

[bdrtsky]

Why would this not work if you annotate the file where validateRequest is defined with "use server";?

Edit: And yes, I tried and it works for my application.

because the question was about using it in files with "use client" and in your example you show it's usage in file with "use client", now you tell this works only in "use server" 🤦‍♂️ seriously?

[rwieruch]

I'm not sure why I invest so much time here, especially given the negative tone of the discussion ...

It says: "where validateRequest is defined with "use server";", not where it is used.

In the file where you define validateRequest you need to use "use server";, because it needs to be a Server Action. Otherwise you would have to define a proxy Route Handler. In the Client Component (from above) where you use useEffect and use validateRequest, you will still be using "use client"; (otherwise useEffect wouldn't work in the first place).

Down voting everyone doesn't add much value to the discussion.

EDIT: And yes, confirmed it in my upcoming course that this works.

[AugustoTI]

@AugustoTI saved my day. thanks a lot. I was looking for a solution to get userID in the client component, Solid solution r🚀🚀🚀

[Its-Satyajit]

What about this?

this implementation is doesn't convert the page to server-rendered on demand
but exposes some details

Header.txs

"use client";

import React, { useEffect } from "react";
import { logout } from "@/serverActions/AuthenticAtion";
import useUserDataStore from "@/store.ts/UserState";

export default function Header() {
  const { fetchUser, userData } = useUserDataStore();

  useEffect(() => {
    fetchUser();
  }, [fetchUser]);

  return (<>
  
  ...
    {!userData ? (
              <>
                <li>
                  <Link href="/auth/signup">
                    <Button variant={"outline"}>Sign Up</Button>
                  </Link>
                </li>
                <li>
                  <Link href="/auth/signin">
                    <Button>Sign In</Button>
                  </Link>
                </li>
              </>
            ) : (
            <>
                <li>
                  {userData?.username}
                </li>
                <li>
                  <Link href="/auth/signin">
                    <Button   onClick={async () => {
                      await logout();
                      fetchUser();
                    }}>Sign Out</Button>
                  </Link>
                </li>
              </>
            )  
            
            ... 
  <>)

UserState.ts

import { User } from "lucia";
import { create } from "zustand";

import { validateRequest } from "@/lib/auth/validateRequest";

interface UserState {
  userData: User | null;
  fetchUser: () => Promise<void>;
}

const useUserDataStore = create<UserState>((set) => ({
  userData: null,
  isLoading: false,
  error: null,
  fetchUser: async () => {
    const { user } = await validateRequest();
    set(() => ({ userData: user }));
  },
}));

export default useUserDataStore;

But this is exposing these...

is there any thin way to prevent this exposer ?

[paulwongx]

If you're making a fetch request for data, when the data comes back it will be revealed in the network tab. Even with a JWT, the data is stored in a cookie and is encoded, which means you can decode it using jwt.io. As long as the hashed password isn't here, I don't think there is anything unexpected going on here.

If you really wanted to encode the data, you can create a server action or api route, call validateRequest, then encode the body like with a JWT and then decode it on the client so when you look on the client it's just gibberish, but it really doesn't do anything worthwhile since anyone can decode the encoded body payload

[cjxe]

After the user authenticates, save the non-sensitive information (e.g., userId) in the browser's/client's storage. Some options are:

• localStorage
• cookie
• in the URL
• in a state management library like Redux ToolKit or Zustand
• and more...