Conditional Rendering based on User Metadata

[athome176]

Building a ReactJS app with Node/Express backend. I want to conditionally render a button for an Admin page if the user has the correct Admin role in their metadata. I understand this is seperate from protecting the route, I’ll get to that - and I already know how to add the role to metadata via an action, that part works fine; but I have no idea how to conditionally render the Admin button based on role pulled from metadata. Can anyone point me to an example for this?

[konrad.sopala]

Hey there!

Thanks for sharing your usecase! We definitely don’t have any official guidance on that as this is too custom but maybe someone from our Community have done something similar in the past and will be able to share. Added a few tags to your topic for better searchability

[athome176]

Thanks for the reply - I figured it out. After ensuring that the permissions are added to metadata via rule, I was able to first reference the value in React this way:

const role = user[`https://my-namespace.com/roles`][0];

…then use code like this to selectively render:

{role === "messages-admin" ? (
                                                <div>
                                                    Admin Content
                                                </div>
                                            ) : (
                                                <div>
                                                    Non-admin Content
                                                </div>
                                            )}

User with the “messages-admin” role will see the Admin Content, while users without will see Non-admin content.

[konrad.sopala]

Perfect! Thanks for sharing it with the rest of community!