Supabase- Ability for admin user to add users

Hi everyone, I have a client who's plan for a crud app is to disable user signup as it'll be an internal tool. User accounts should only be created by a couple of admins. What's the best way of handling this? I found the following in the Supabase docs but was unsure of how best to tackle it within Refine.
const { data, error } = await supabase.auth.admin.createUser({
email: 'user@email.com',
password: 'password',
user_metadata: { name: 'Yoda' }
})
const { data, error } = await supabase.auth.admin.createUser({
email: 'user@email.com',
password: 'password',
user_metadata: { name: 'Yoda' }
})
kapa.ai
kapa.ai121d ago
Hi @James. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, Refine does not directly provide a feature to create users via the admin interface. However, you can create a custom page or component in your Refine application to handle this functionality. The code snippet you provided is a Supabase function to create a user. You can use this function in your custom component to create users. Here's a basic example of how you might implement this:
import { supabaseClient } from "./supabaseClient";

const CreateUser = () => {
const createUser = async () => {
const { data, error } = await supabaseClient.auth.admin.createUser({
email: 'user@email.com',
password: 'password',
user_metadata: { name: 'Yoda' }
})

if (error) {
console.error(error);
} else {
console.log(data);
}
}

return (
<button onClick={createUser}>Create User</button>
);
}

export default CreateUser;
import { supabaseClient } from "./supabaseClient";

const CreateUser = () => {
const createUser = async () => {
const { data, error } = await supabaseClient.auth.admin.createUser({
email: 'user@email.com',
password: 'password',
user_metadata: { name: 'Yoda' }
})

if (error) {
console.error(error);
} else {
console.log(data);
}
}

return (
<button onClick={createUser}>Create User</button>
);
}

export default CreateUser;
In this example, clicking the "Create User" button will call the createUser function, which uses the Supabase client to create a new user. Please note that this is a basic example and you would need to add form handling to collect the user's email, password, and other data. You would also need to handle the response from the createUser function to provide feedback to the admin user. For more information on how to create custom pages in Refine, you can refer to the Refine documentation (https://refine.dev/docs/tutorial/introduction/index/). For more information on using Supabase with Refine, you can refer to the Supabase data provider documentation (https://refine.dev/docs/data/packages/supabase). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai121d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
manual-pink
manual-pink115d ago
@kapa.ai Here's more info from the Supabase docs. Trying to decide how best to tackle it. I'll be hosting on Netlify. Auth Admin Any method under the supabase.auth.admin namespace requires a service_role key. These methods are considered admin methods and should be called on a trusted server. Never expose your service_role key in the browser. Create server-side auth client import { createClient } from '@supabase/supabase-js' const supabase = createClient(supabase_url, service_role_key, { auth: { autoRefreshToken: false, persistSession: false } }) // Access auth admin api const adminAuthClient = supabase.auth.admin Create a user This function should only be called on a server. Never expose your service_role key in the browser. To confirm the user's email address set email_confirm to true. Argument defaults to false. createUser() will not send a confirmation email to the user. You can use inviteUserByEmail() if you want to send them an email invite instead. If you are sure that the created user's email is legitimate and verified, you can set the email_confirm param to true. With custom user metadata const { data, error } = await supabase.auth.admin.createUser({ email: 'user@email.com', password: 'password', user_metadata: { name: 'Yoda' } })
kapa.ai
kapa.ai115d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the additional information you provided, it's clear that the user creation process using the supabase.auth.admin.createUser method should be executed server-side due to security reasons. This means you should not call this method directly from your Refine application running in the browser. Since you're hosting your application on Netlify, you can use Netlify Functions to create a serverless function that handles user creation. This function would be responsible for calling the supabase.auth.admin.createUser method. Here's a basic example of how you might implement this:
// netlify/functions/create-user.js
const { createClient } = require('@supabase/supabase-js')

exports.handler = async function(event, context) {
const { email, password, name } = JSON.parse(event.body)

const supabase = createClient(supabase_url, service_role_key, {
auth: {
autoRefreshToken: false,
persistSession: false
}
})

const { data, error } = await supabase.auth.admin.createUser({
email,
password,
user_metadata: { name }
})

if (error) {
return {
statusCode: 500,
body: JSON.stringify({ error: error.message }),
}
}

return {
statusCode: 200,
body: JSON.stringify({ user: data }),
}
}
// netlify/functions/create-user.js
const { createClient } = require('@supabase/supabase-js')

exports.handler = async function(event, context) {
const { email, password, name } = JSON.parse(event.body)

const supabase = createClient(supabase_url, service_role_key, {
auth: {
autoRefreshToken: false,
persistSession: false
}
})

const { data, error } = await supabase.auth.admin.createUser({
email,
password,
user_metadata: { name }
})

if (error) {
return {
statusCode: 500,
body: JSON.stringify({ error: error.message }),
}
}

return {
statusCode: 200,
body: JSON.stringify({ user: data }),
}
}
In your Refine application, you would then call this function when you want to create a user:
const CreateUser = () => {
const createUser = async () => {
const response = await fetch('/.netlify/functions/create-user', {
method: 'POST',
body: JSON.stringify({
email: 'user@email.com',
password: 'password',
name: 'Yoda'
}),
})

const data = await response.json()

if (data.error) {
console.error(data.error);
} else {
console.log(data.user);
}
}
return (
<button onClick={createUser}>Create User</button>
);
}

export default CreateUser;
const CreateUser = () => {
const createUser = async () => {
const response = await fetch('/.netlify/functions/create-user', {
method: 'POST',
body: JSON.stringify({
email: 'user@email.com',
password: 'password',
name: 'Yoda'
}),
})

const data = await response.json()

if (data.error) {
console.error(data.error);
} else {
console.log(data.user);
}
}
return (
<button onClick={createUser}>Create User</button>
);
}

export default CreateUser;
Please note that this is a basic example and you would need to add form handling to collect the user's email, password, and other data. You would also need to handle the response from the createUser function to provide feedback to the admin user. For more information on using Netlify Functions, you can refer to the Netlify Functions documentation (https://docs.netlify.com/functions/overview/). For more information on using Supabase with Refine, you can refer to the Supabase data provider documentation (https://refine.dev/docs/data/packages/supabase). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai115d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
manual-pink
manual-pink115d ago
@kapa.ai I'll give that a try.
kapa.ai
kapa.ai115d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I'm glad you found the information helpful! If you have any more questions or run into any issues, don't hesitate to ask. Good luck with your project! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai115d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
How to load a component both in Authenticated and Unauthenticated state?How can I arrange my routes to load a component page both in authenticated and unathenticated state?crud operator for text[]Hi guys, I can't filter my field I have a field name superfood which is a text array in supabase db Nextjs app routerHow setup refine using the latest nextjs app router and shadcn uiWhen sidebar is collapsed, changing page on paginated list open sidebar menu itemWhen changing the page, the page and offset query parameter of path is modified and is detected as aUseMany missing in some generated pages by the MUIinferencerWhats the reason why some List pages are generated by the MUIinferencer with the UseMany methods andgraphql mutationi am using graphql for and i want to pass different meta fields for getOne and update using useForm Filter a table field with outside component and stateHi guys, I'm using useTable to get data from database, here is my useTable code ```const filter = sugraphql mutationI am trying to use useForm from ``` import { useForm } from "@refinedev/react-hook-form"; ``` i waUpdate specific field by using mutate useUpdateHi guys, I'm using mutate of useUpdate() to update a record on my db How can I just update a specifiedit modalI am trying to create a edit modal inside the card. my card contains only name which can be edited oHiding a button in the Navbar based on User Role (MUI)Hi, How can i hide a button in the Nav bar based on the role of the user connected? (MUI)Filtering with useList and state operationHi guys, I currently have a List with useList to get data from a table with supabase Now I have a buHow does useLogin with custom authProvider?I want use custom authProvider and login.include options in useManylike pagination how to add include method in useTable hooks or any other hooks?Showing error message from server on HTTP errorHello, I'm a backender and playing with Refine so I'm new to React. I have an "create new item" pageCustomize CRUD Tables headerhow can i customize the headers of the CRUD Tables? (vite, MUI, Rest API)Ant design show record on row clickHow can I show the information of a record (in the show screen) when the corresponding row is clickeuseForm error handlingHello, I'm a backender and playing with Refine so I'm new to React. I have an "create new item" pageCustom data provider with JWT and specific request typesHi, I'm quite a noob with refine and react. I want to create a custom data provider, which will connCannot read properties of undefined (reading 'tokens')I got this error after log in