All topics

Authentication and Restricting Access to Users

Jay | DRAGXN

3 months ago

Hi all, I'm curious about how you all handle authentication and access control (e.g., restricting pages for specific user roles/groups) in Toddle.

What’s your preferred approach for managing user access? Do you rely on an app provider component, custom actions, or something else?

If anyone has experience integrating Supabase for this, I'd love to hear your insights!

Thanks in advance!
Tod

3 months ago

Great energy @Jay | DRAGXN! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
Lucas G

3 months ago

You can search up previous discussions on this for details but essentially people often use a wrapper component to handle different contexts, one of which is commonly auth related.

For Supabase, you can use the auth endpoint to check for the user and handle redirects
Jay | DRAGXN

3 months ago

@Lucas G Hey Lucas, I'd like your opinion on this. I have a protectedPage component that's just a combo of my appProvider and authProvider.. the authProvider auto fetchs the user data and I thought I would be able to access that data from the slot. Is that not the case?
@Jay | DRAGXN
@Lucas G Hey Lucas, I'd like your opinion on this. I have a protectedPage component that's just a combo of my appProvider and authProvider.. the authProvider auto fetchs the user data and I thought I would be able to access that data from the slot. Is that not the case?
Lucas G

3 months ago

What do you mean by access the data from the slot? Are you referring to the context?
Lucas G

3 months ago

You can't subscribe to contexts from a page (since the page is the "highest" element in the hierarchy)
Jay | DRAGXN

3 months ago

Yea, I thought I could get the UserData that authProvider gets and anything inside the slot would have access to the data.
Lucas G

3 months ago

You can handle the redirect directly from the authProvider
Or have child components subscribe to it to handle different scenarios
Jay | DRAGXN

3 months ago

So only components can get the data from authProvider?
Lucas G

3 months ago

Contexts can only be subscribed to by children elements of the provider
Jay | DRAGXN

3 months ago

Ah, got you. So for every page that has user data, I have to set up the API everytime?
Lucas G

3 months ago

Pages and components can create contexts but pages cannot subscribe to them (since they can't be children of anything)
@Jay | DRAGXN
Ah, got you. So for every page that has user data, I have to set up the API everytime?
Lucas G

3 months ago

I'd use the provider components everywhere and have components use the contexts
Jay | DRAGXN

3 months ago

Okay then I'm a bit confused. Would you happen to have an example of something similar to what I'm trying to do? I thought it could be something like this appProvider -> authProvider (Gets User Data) -> Slot -> Anything here can get user data.
@Jay | DRAGXN
Okay then I'm a bit confused. Would you happen to have an example of something similar to what I'm trying to do? I thought it could be something like this appProvider -> authProvider (Gets User Data) -> Slot -> Anything here can get user data.
Lucas G

3 months ago

That is how it works
Lucas G

3 months ago

Any component in that slot would be a child of the provider
Meaning they can subscribe to its context
@Lucas G
That is how it works
Jay | DRAGXN

3 months ago

Yea I got that part. I'm not sure how to explain it but basically:
✅ authProvider (Gets User Data) -> Direct children can get the information.
❌ authProvider (Gets User Data) -> Slot -> Children that aren't components can't get the data. So if I had a H1 and wanted to display the email from User Data, I couldn't.

Does that make sense?
Lucas G

3 months ago

Yeah that's correct
@Jay | DRAGXN
So only components can get the data from authProvider?
Lucas G

3 months ago

Sorry, you mentioned it earlier here but I didn't confirm it.

Authentication and Restricting Access to Users

Jay | DRAGXN

Tod

Lucas G

Jay | DRAGXN

Lucas G

Lucas G

Jay | DRAGXN

Lucas G

Jay | DRAGXN

Lucas G

Jay | DRAGXN

Lucas G

Lucas G

Jay | DRAGXN

Lucas G

Lucas G

Jay | DRAGXN

Lucas G

Lucas G