W
Wasp•3d ago
cooluke.

Page with optional auth - How to get user data in React if the user is signed in?

If I set authRequired: true on a page in main.wasp, then I can get the user data just fine in the React front-end like: 
export const MainPage = ({ user }: { user: AuthUser }) => {
export const MainPage = ({ user }: { user: AuthUser }) => {
BUT, if I set authRequired: false in main.wasp, then that user object is undefined. How do I make a page with auth "optional" (user doesn't have to be signed in to access it) but get the user data if the user does happen to be signed in?
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @cooluke.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a page with optional authentication and access user data when the user is signed in, you can use the useAuth hook provided by Wasp. This approach allows you to make the page accessible to both authenticated and unauthenticated users while still being able to retrieve user data if available. Here's how you can implement this: 1. Set authRequired: false in your main.wasp file for the page you want to make optionally authenticated: 
page MainPage {
  component: import { MainPage } from "@src/MainPage",
  authRequired: false
}
page MainPage {
  component: import { MainPage } from "@src/MainPage",
  authRequired: false
}
2. In your React component, use the useAuth hook to access the user data: 
import { useAuth } from 'wasp/client/auth'

export const MainPage = () => {
  const { data: user, isLoading, error } = useAuth()

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (error) {
    return <div>Error: {error.message}</div>
  }

  return (
    <div>
      {user ? (
        <p>Welcome, {user.username}!</p>
      ) : (
        <p>Welcome, guest!</p>
      )}
      {/* Rest of your component */}
    </div>
  )
}
import { useAuth } from 'wasp/client/auth'

export const MainPage = () => {
  const { data: user, isLoading, error } = useAuth()

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (error) {
    return <div>Error: {error.message}</div>
  }

  return (
    <div>
      {user ? (
        <p>Welcome, {user.username}!</p>
      ) : (
        <p>Welcome, guest!</p>
      )}
      {/* Rest of your component */}
    </div>
  )
}
This approach allows you to: - Make the page accessible to all users (authenticated or not) - Retrieve user data if the user is signed in - Handle loading and error states - Conditionally render content based on the user's authentication status The useAuth hook is a wrapper around Wasp's useQuery hook and returns data in the same format, including isLoading and error properties for better state management. For more information on using the useAuth hook, you can refer to the Wasp documentation on accessing the logged-in user. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @cooluke., I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
miho
miho•3d ago
Bot is correct, but I'd recommend reading this part of the docs: https://wasp.sh/docs/auth/entities
Accessing User Data | Wasp
First, we'll check out the most practical info: how to access the user's data in your app.

Did you find this page helpful?