Wasp•6mo ago

Sub page-level auth

So, checking the docs, seems like auth is enabled on a page level. If auth is enabled for a page, not-logged-in people can not access any functionality of the page. What if i want some select functionality to be available even to public, and some others to only logged in, in the same page?

4 Replies

kapa.ai•6mo ago

Hi @Oguz A.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Wasp, the authRequired property is used to set authentication at the page level. If authRequired is set to true, only authenticated users can access the page. Unauthenticated users are redirected to a route defined by the app.auth.onAuthFailedRedirectTo field. This is a page-level setting and applies to the entire page. However, if you want to have some parts of the page accessible to everyone and some parts only to authenticated users, you would have to handle that manually in your React components. You can use the user object that is passed as a prop to the page's React component when authRequired is set to true. This user object can be used to conditionally render parts of your page based on whether a user is authenticated or not. Here is an example:

export const MainPage = ({ user }) => {  
 // Do something with the user  
 if (user) {
   // Render components for authenticated users
 } else {
   // Render components for unauthenticated users
 }
}

export const MainPage = ({ user }) => {  
 // Do something with the user  
 if (user) {
   // Render components for authenticated users
 } else {
   // Render components for unauthenticated users
 }
}

In this example, the user object is checked to determine if a user is authenticated. Depending on the authentication status, different components are rendered. Remember, this approach requires you to manually control the visibility of different parts of your page based on the user's authentication status. Sources: - Protecting a page with authRequired (https://wasp-lang.dev/docs/auth/overview#protecting-a-page-with-authrequired) - Update the Main Page to Require Auth (https://wasp-lang.dev/docs/tutorial/auth#update-the-main-page-to-require-auth) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Oguz A., 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•6mo ago

@kapa.ai what about the useAuth hook?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the useAuth hook provided by Wasp to access the logged-in user's data in any React component, not just pages. This hook is a thin wrapper over Wasp's useQuery hook and returns data in the same format. Here's an example of how you can use it:

import { useAuth, logout } from 'wasp/client/auth'  
import { Link } from 'react-router-dom'  
  
export function Main() {  
 const { data: user } = useAuth()  
  
 if (!user) {  
 return (  
 <span>  
 Please <Link to="/login">login</Link> or{' '}  
 <Link to="/signup">sign up</Link>.  
 </span>  
 )  
 } else {  
 return (  
 <>  
 <button onClick={logout}>Logout</button>  
 {/* Render components for authenticated users */}
 </>  
 )  
 }  
}

import { useAuth, logout } from 'wasp/client/auth'  
import { Link } from 'react-router-dom'  
  
export function Main() {  
 const { data: user } = useAuth()  
  
 if (!user) {  
 return (  
 <span>  
 Please <Link to="/login">login</Link> or{' '}  
 <Link to="/signup">sign up</Link>.  
 </span>  
 )  
 } else {  
 return (  
 <>  
 <button onClick={logout}>Logout</button>  
 {/* Render components for authenticated users */}
 </>  
 )  
 }  
}

In this example, the useAuth hook is used to get the user data. If the user is not logged in (user is null), a message is displayed asking the user to log in or sign up. If the user is logged in, the components for authenticated users are rendered. This way, you can control the visibility of different parts of your component based on the user's authentication status. Sources: - Using the useAuth hook (https://wasp-lang.dev/docs/auth/overview#using-the-useauth-hook) - Accessing the logged-in user on the client (https://wasp-lang.dev/docs/auth/overview#on-the-client) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @miho, 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•6mo ago

I'd recommend reading about it more in our docs: https://wasp-lang.dev/docs/auth/overview#accessing-the-logged-in-user

Overview | Wasp

Auth is an essential piece of any serious application. That's why Wasp provides authentication and authorization support out of the box.

Gaming

Programming

Sub page-level auth