Wasp•6mo ago

useAuth.ts

I'm using Opensaas and I'd like to add a guest user (non-login user). Is there an equivalent useAuth.ts file in Opensaas or other way to strucuture a guest user?

7 Replies

kapa.ai•6mo ago

Hi @Arnab. 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 useAuth hook is used to access the logged-in user's data on the client-side. If a page's declaration sets authRequired to true, the page's React component receives the user object as a prop. If the user is not logged in, the user object will not be set. This is how you can differentiate between a guest user (non-logged in user) and a logged-in user. Here is an example of how you can use the useAuth hook in your React component:

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>  
 // ... other components  
 </>  
 )  
 }  
}

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>  
 // ... other components  
 </>  
 )  
 }  
}

In this example, if the user object is not set (i.e., the user is not logged in), the component renders a message asking the user to log in or sign up. If the user object is set (i.e., the user is logged in), the component renders the logged-in user's view. As for the useAuth.ts file, it's not explicitly mentioned in the provided sources if OpenSaaS has an equivalent file. However, since OpenSaaS is built with Wasp, it should follow the same principles and use the useAuth hook for handling user authentication. For more information, you can refer to the Wasp documentation on accessing the logged-in user (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 @Arnab, 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?

martinsos•6mo ago

@Arnab I am curious, what does it mean it is a guest user? Does it just mean they don't have to login and that is it? Do you still want to track some info about them? If so, any thoughts on how that could go? Simplest is just them not being a user at all, meaning they don't get a User entry in the db with id and all, and just let them browse stuff unuthenticated, Wasp already supports that. More complex would be to create some kind of data fro them -> now that data could live in the browser exclusively, in e.g. local stoarge, or you could actually create User for them in the db, but with no real auth and maybe some identifier that they temporarily store in the local storage and once they loose it that is it -> that is a bit peculiar though, I am not 100% sure what is the best way to pull that off but we could explore it further.

ArnabOP•6mo ago

Thanks for the help! So I'm trying to give a potential user the ability to try the software before trying it. The goal would be convert them to a free registered user, then later paid. I'd like to add blocks to how many times a user can use the free service (cookies?). If it's easy enough merge the guest user with a registered user (if it's a pain no need). It's a similar flow to this page: https://gptzero.me/ The difference is their limiter is the number of characters. I'd be limiting the number of images the user can generate.

GPTZero

The Trusted AI Detector for ChatGPT, GPT-4, & More | GPTZero

Covered by >100 media outlets, GPTZero is the most advanced AI detector for ChatGPT, GPT-4, Gemini. Check up to 50000 characters for AI plagiarism in seconds.

ArnabOP•6mo ago

Opensaas doesn't have a useAuth. So I created one. It seems to be working, but I'm worried I messed something up with this useAuth.tsx: import { useQuery } from '@tanstack/react-query'; import axios from 'axios'; const getMe = async () => { const response = await axios.get('/auth/me'); return response.data; }; export const useAuth = () => { return useQuery(['getMe'], getMe, { retry: false, onError: (error) => { console.error('Error fetching user data:', error); } }); }; In the browser console I keep getting errors (in guest mode) "useAuth.ts:20

GET http://localhost:3001/auth/me 401 (Unauthorized)"

miho•6mo ago

Opensaas doesn't have a useAuth.

What do you mean by this? 😄 You can't import it on the client from wasp/client/auth? That would be very strange, because OpenSaaS is just Wasp under the hook. Hmmm. Could you share how you tried importing the helper? On the topic of guest users: you either make people signup and track their status via some role filed that can be guest or paid-user or smth like that. Or you somehow track what the user did before they signed up (in local storage maybe) and later on save that after that somehow after they signed up. I think the first option is more robust.

ArnabOP•6mo ago

ok thank you. In wasp there's the useAuth.ts (https://github.com/wasp-lang/wasp/blob/24920c0bf5bc4dfee43dd3cf68db7f24723f6c92/waspc/data/Generator/templates/sdk/wasp/auth/useAuth.ts#L15). I can't seem to find the same file in opensaas. Which file would I edit the role to be guest or paid-user?

GitHub

wasp/waspc/data/Generator/templates/sdk/wasp/auth/useAuth.ts at 249...

The fastest way to develop full-stack web apps with React & Node.js. - wasp-lang/wasp

miho•6mo ago

Here's the relevant bit of the docs: https://wasp-lang.dev/docs/auth/overview#on-the-client

import { useAuth } from 'wasp/client/auth'

import { useAuth } from 'wasp/client/auth'

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

useAuth.ts