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.

[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.

[a89529294]

I tried this but it did not work, I got this error
You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory.
It seems like it's from
import { cookies } from "next/headers";
in the file that exports validateRequest()

[rwieruch]

Yes, this is about the app/ directory.

[yuanqili]

@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.

Thanks a lot for your code. However I wonder why it works if validateRequest is defined with use server and not works without the directive. Some questions

1. all components in nextjs are server component by default, why would this directive be necessary?
2. validateRequest does not look like a component at all, so is it still a server component or component or whatever?
3. in nextjs, if I remembered correctly, server components are free to have client components but not in the other direction. In your solution, you have a client component importing a server one, I wonder why nextjs does not throw an error here.

I just want to have a deep understanding of nextjs, rsc, etc. Thanks a lot.

[tresorama]

@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.

Thanks a lot for your code. However I wonder why it works if validateRequest is defined with use server and not works without the directive. Some questions

1. all components in nextjs are server component by default, why would this directive be necessary?

2. validateRequest does not look like a component at all, so is it still a server component or component or whatever?

3. in nextjs, if I remembered correctly, server components are free to have client components but not in the other direction. In your solution, you have a client component importing a server one, I wonder why nextjs does not throw an error here.

I just want to have a deep understanding of nextjs, rsc, etc. Thanks a lot.

Take a look a Server Action to understand "use server".
In short, they are similar to a typical API route where "browser send an HTTP request to the server and receive a response"

These server aren't a component , they are functions

You can import server action in a client component and call it.

You're right , you can import client comp from a server component but not viceversa

[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...