Wasp•7mo ago

UI intercept

I want to intercept any update, create, delete actions with a PIN screen to ensure the user is authorized to perform the action. How can I architect this on the frontend? Currently I am thinking this could be some sort of action middleware which overlays a PIN input and short circuits the action if the PIN code is incorrect. How might I set this up?

7 Replies

kapa.ai•7mo ago

Hi @Karan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The knowledge sources provided do not contain specific information on how to set up an action middleware for a PIN input screen in Wasp. However, Wasp does provide a way to check if a user is authenticated before performing certain actions. You can update your queries and actions to forbid access to non-authenticated users. Here is an example from the Wasp documentation (https://wasp-lang.dev/docs/tutorial/auth#updating-operations-to-check-authentication):

import { HttpError } from 'wasp/server'  
  
export const createTask = async (args, context) => {  
 if (!context.user) {  
 throw new HttpError(401)  
 }  
 return context.entities.Task.create({  
 data: {  
 description: args.description,  
 user: { connect: { id: context.user.id } },  
 },  
 })  
}  
  
export const updateTask = async (args, context) => {  
 if (!context.user) {  
 throw new HttpError(401)  
 }  
 return context.entities.Task.updateMany({  
 where: { id: args.id, user: { id: context.user.id } },  
 data: { isDone: args.isDone },  
 })  
}

import { HttpError } from 'wasp/server'  
  
export const createTask = async (args, context) => {  
 if (!context.user) {  
 throw new HttpError(401)  
 }  
 return context.entities.Task.create({  
 data: {  
 description: args.description,  
 user: { connect: { id: context.user.id } },  
 },  
 })  
}  
  
export const updateTask = async (args, context) => {  
 if (!context.user) {  
 throw new HttpError(401)  
 }  
 return context.entities.Task.updateMany({  
 where: { id: args.id, user: { id: context.user.id } },  
 data: { isDone: args.isDone },  
 })  
}

In this example, if the user is not authenticated (if (!context.user)), an HTTP 401 error is thrown, preventing the action from being executed. For more complex authorization scenarios, you might need to extend the user and permissions model. A community member asked a similar question on the Wasp Discord (https://discord.com/channels/686873244791210014/1213121869507592244), you might find the discussion there helpful. For the specific case of intercepting actions with a PIN screen, you might need to implement this logic in your frontend React code, outside of Wasp's autogenerated code. Unfortunately, the provided knowledge sources do not contain information on how to do this. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Karan, 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•7mo ago

In Wasp this is a top level concept at a level of a page e.g. authRequired -> https://wasp-lang.dev/docs/auth/overview#protecting-a-page-with-authrequired Or you can use the useAuth hook to get the info about the user being authenticated and have more control on when to redirect -> https://wasp-lang.dev/docs/auth/overview#using-the-useauth-hook

Overview | Wasp

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

KaranOP•7mo ago

Sorry maybe I didn't describe it well enough. This is an app for a workstation where many users can create entities. So in addition to login, they would need a PIN code for doing transactions.

MEE6•7mo ago

Wohooo @Karan, you just became a Waspeteer level 4!

KaranOP•7mo ago

So its an added layer of security also I just created a PIN modal and passed in the action and inputs which gets called if the PIN was correct

Vinny (@Wasp)•7mo ago

hm. not sure I understand why this would be necessary if the user were logged in already, but you could just add a function that you pass to every wasp operation (or action) that checks if the pin is correct, and proceeds if it is / throw an error if it isn't.

KaranOP•7mo ago

Yup that's exactly what I did. Thanks. Maybe this is redundant but I will have to test out the UX

Gaming

Programming

UI intercept