conventional-tan•7mo ago

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' }
})

8 Replies

kapa.ai•7mo 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•7mo ago

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

conventional-tan•7mo 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•7mo 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•7mo ago

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

conventional-tan•7mo ago

@kapa.ai I'll give that a try.

kapa.ai•7mo 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•7mo ago

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