https://supertokens.com/ logo
Join Discord
Powered by
if I use the SignInAndUp component from 'supertoke...
# support-questions-legacy
i
if I use the SignInAndUp component from 'supertokens-auth-react/recipe/thirdpartypasswordless/prebuiltui' and I would like to catch API error, is it possible?
r
Hey @idanto
Yea, I think you should be able to do that via the post api hook
i
ohh right forgot about that option. but the question is if the component will be able to present a different error massage comes from the BE
so my usecase is, if a user is trying to connect to a tenant it doesn't belog to, I do a check in the BE and return 403 with a message. I would like the UI first to show a relevant error and maybe also re-render to login to the public tenant or clean the tenant localstore value
r
Right. So showing a relevant error can be done if the backend api returns a 200 with a status of GENERAL_ERROR along with the error message. That error message is shown in the UI as is.
As for re rendering to the right tenant, you can do that via the post api hook. Set the right tenant Id in localstorage and reload the page. This should make the getTenantId next time pick the correct tenant id
i
I guess I can do the same BE logic also in the post hook no? cause the response of the post hook is what the component gets, right?
r
Yea.
i
thanks
I don't think I can modify the response in the post api hook, unless it is not modifing the response but the context
r
oh yea, you can't modify the response on the frontend. They are read only
i
I'm trying to add postAPIHook: async (context) => { if (context.action === 'PASSWORDLESS_CREATE_CODE') { const response = context.fetchResponse; if (response.status === 403) { const navigate = useNavigate(); navigate(window.location.pathname); // This will navigate to the same path without any query params } } } but it seems like the code doesn't get there
r
have you checked the types?
i
wdym?
r
i mean typescript types
where are you adding the preAPIHook function?
i
in the ThirdPartyPasswordless.init
and it is postAPIHook
the preAPIHook works
r
right, and you our using our pre built UI right? Not calling the createCode function yourself?
i
yea
r
hmm
i
it doesn't get to the POST cause my BE returns 403 which cause the lib to throw an error
r
right
i
added that to catch it: override: { functions: (originalImplementation) => { return { ...originalImplementation, // we will only be overriding what happens when a user // enters the OTP or clicks on the magic link createPasswordlessCode: async function (input) { try { const response = await originalImplementation.createPasswordlessCode(input); if (response.fetchResponse.status === 403) { const navigate = useNavigate(); navigate(window.location.pathname); // This will navigate to the same path without any query params } return response; } catch (error) { console.log(error); throw error; } } // ... // TODO: override more functions }; } },
r
and that displays a something went wrong error in the UI right?
i
yes
wonder if I can create something in the catch in case the status is 403 so the flow will continue
r
you can instead override the createCode recipe function on the frontend
passwordless.init -> override -> createCode
i
this is what the last snippet of code I sent do, no?
r
and then catch errors around the originalImplementation.createCode and then inspect that error
ah yea
that should work
i
what I can return from the catch block to show a relevant error message on the screen?
r
{ fetchResponse: Response; reason: "Your custom message here"; status: "SIGN_IN_UP_NOT_ALLOWED" }
12 Views
PreviousNext
Powered by