sensitive-blue•17mo ago

Supabase Set role upon signup or signInWithOAuth

Hi again everyone, How to set claim for role in Supabase when user signup with email and password or signInWithOAuth in refine app I'm trying to integrate role base access thank you in advance.

4 Replies

kapa.ai•17mo ago

Hey @franzdev! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- To set a claim for a role in Supabase when a user signs up with email and password or signInWithOAuth in a refine app, you can follow these steps: 1. Set up Supabase Custom Claims as described in the refine blog post (https://refine.dev/blog/refine-pixels-6/). This will allow you to store and retrieve user roles in the auth.users.raw_app_meta_data field. 2. Bootstrap a claims_admin role for a first user using the Supabase SQL Editor, as mentioned in the blog post (https://refine.dev/blog/refine-pixels-6/). This will allow the user with the claims_admin role to set roles for other users. 3. After setting up the Custom Claims and bootstrapping the claims_admin role, you can set roles for your designated users using the Supabase SQL Editor. For example:

select set_claim('designated-user-uuid', 'role', '"editor"');  
select set_claim('another-designated-user-uuid', 'role', '"admin"');

select set_claim('designated-user-uuid', 'role', '"editor"');  
select set_claim('another-designated-user-uuid', 'role', '"admin"');

4. Update the getPermissions() method in your authProvider.ts file to use the supabaseClient.rpc() method to call the get_my_claims SQL function remotely, as shown in the refine blog post (https://refine.dev/blog/refine-pixels-6/):

getPermissions: async () => {  
 const user = supabaseClient.auth.user();  
  
 if (!user) {  
 return Promise.reject();  
 }  
  
 const { data } = await supabaseClient.rpc('get_my_claim', { claim: 'role' });  
 return Promise.resolve(data);  
},

getPermissions: async () => {  
 const user = supabaseClient.auth.user();  
  
 if (!user) {  
 return Promise.reject();  
 }  
  
 const { data } = await supabaseClient.rpc('get_my_claim', { claim: 'role' });  
 return Promise.resolve(data);  
},

5. Finally, update the can method in your accessControlProvider.ts file to use the role received from authProvider.getPermissions():

export const accessControlProvider = {  
 can: async ({ resource, action }: CanParams): Promise<CanReturnType> => {  
 const role = await authProvider.getPermissions();  
  
 const enforcer = await newEnforcer(model, adapter);  
 const can = await enforcer.enforce(role, resource, action);  
  
 return Promise.resolve({  
 can,  
 });  
 }  
};

export const accessControlProvider = {  
 can: async ({ resource, action }: CanParams): Promise<CanReturnType> => {  
 const role = await authProvider.getPermissions();  
  
 const enforcer = await newEnforcer(model, adapter);  
 const can = await enforcer.enforce(role, resource, action);  
  
 return Promise.resolve({  
 can,  
 });  
 }  
};

By following these steps, you should be able to set and retrieve user roles in your refine app when users sign up or sign in with OAuth. ----------------------

kapa.ai•17mo ago

<@619660544319684609> kapa.ai is still learning and improving, please let us how it did by reacting below

deep-jade•17mo ago

refine has access control provider for role based access. currently we don't have example with supabase but you can call authProvider?.getIdentity on accessControlProvider.can function to implement with supabase https://refine.dev/docs/advanced-tutorials/access-control/#adding-accesscontrolprovider

dependent-tan•14mo ago

wow this worked for me, i created my own custom ABAC and I needed to access the authprovider.getPermissions method so I wrapped it inside a function and which returned the shape as request by the access control provider