sharp-indigo
sharp-indigo5mo ago

adding raw user meta data "first_name" while register user

adding raw user meta data "first_name" while register user -- antd
8 Replies
kapa.ai
kapa.ai5mo ago
Hi @Deepanshu Bajaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add raw user meta data like "first_name" while registering a user using Ant Design (antd) in a refine application, you can follow these steps: 1. Set Up Supabase for User Metadata: You need to ensure that your Supabase database is set up to handle the additional metadata. Here is an example SQL script to add user metadata:
insert into public.users (id, full_name, avatar_url, first_name)
values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url', new.raw_user_meta_data->>'first_name');
return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_public_user();

insert into public.users (id, full_name, avatar_url, first_name)
values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url', new.raw_user_meta_data->>'first_name');
return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_public_user();

This script ensures that the first_name field is included in the user metadata. 2. Modify the Registration Form in Ant Design: When you swizzle the auth page, make sure to use Ant Design components to include the first_name field in the registration form. Here is an example of how you might modify the registration form:
import React from "react";
import { Form, Input, Button } from "antd";

const RegisterPage = () => {
const onFinish = (values) => {
console.log('Received values of form: ', values);
// Add your registration logic here
};

return (
<Form
name="register"
onFinish={onFinish}
scrollToFirstError
>
<Form.Item
name="first_name"
label="First Name"
rules={[{ required: true, message: 'Please input your first name!' }]}
>
<Input />
</Form.Item>
<Form.Item
name="email"
label="E-mail"
rules={[{ required: true, message: 'Please input your E-mail!' }]}
>
<Input />
</Form.Item>

<Form.Item
name="password"
label="Password"
rules={[{ required: true, message: 'Please input your password!' }]}
hasFeedback
>
<Input.Password />
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
Register
</Button>
</Form.Item>
</Form>
);
};

export default RegisterPage;

import React from "react";
import { Form, Input, Button } from "antd";

const RegisterPage = () => {
const onFinish = (values) => {
console.log('Received values of form: ', values);
// Add your registration logic here
};

return (
<Form
name="register"
onFinish={onFinish}
scrollToFirstError
>
<Form.Item
name="first_name"
label="First Name"
rules={[{ required: true, message: 'Please input your first name!' }]}
>
<Input />
</Form.Item>
<Form.Item
name="email"
label="E-mail"
rules={[{ required: true, message: 'Please input your E-mail!' }]}
>
<Input />
</Form.Item>

<Form.Item
name="password"
label="Password"
rules={[{ required: true, message: 'Please input your password!' }]}
hasFeedback
>
<Input.Password />
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
Register
</Button>
</Form.Item>
</Form>
);
};

export default RegisterPage;

3. Ensure Correct Package Usage: Make sure you are using the correct package for swizzling the auth page. According to the Discord support thread (https://discord.com/channels/837692625737613362/1225014053953470536), you should be using the @refinedev/antd package. By following these steps, you can add the first_name field to the user registration process in your refine application using Ant Design. For more detailed information, you can refer to the refine documentation (https://refine.dev/docs/ui-integrations/ant-design/introduction/) and the Supabase policy examples (https://supabase.com/docs/guides/storage#policy-examples). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5mo ago
<@661831547690680321> kapa.ai is still learning and improving, please let us know how it did by reacting below
sharp-indigo
sharp-indigoOP5mo ago
@kapa.ai write again full code
kapa.ai
kapa.ai5mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To add raw user metadata like "first_name" while registering a user using Ant Design (antd) in a refine application, you can follow these steps: 1. Set Up Supabase for User Metadata: Ensure that your Supabase database is set up to handle the additional metadata. Here is an example SQL script to add user metadata:
insert into public.users (id, full_name, avatar_url, first_name)
values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url', new.raw_user_meta_data->>'first_name');
return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_public_user();

insert into public.users (id, full_name, avatar_url, first_name)
values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url', new.raw_user_meta_data->>'first_name');
return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_public_user();

This script ensures that the first_name field is included in the user metadata. 2. Modify the Registration Form in Ant Design: When you swizzle the auth page, make sure to use Ant Design components to include the first_name field in the registration form. Here is an example of how you might modify the registration form:
import React from "react";
import { Form, Input, Button } from "antd";

const RegisterPage = () => {
const onFinish = (values) => {
console.log('Received values of form: ', values);
// Add your registration logic here
};

return (
<Form
name="register"
onFinish={onFinish}
scrollToFirstError
>
<Form.Item
name="first_name"
label="First Name"
rules={[{ required: true, message: 'Please input your first name!' }]}
>
<Input />
</Form.Item>
<Form.Item
name="email"
label="E-mail"
rules={[{ required: true, message: 'Please input your E-mail!' }]}
>
<Input />
</Form.Item>

<Form.Item
name="password"
label="Password"
rules={[{ required: true, message: 'Please input your password!' }]}
hasFeedback
>
<Input.Password />
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
Register
</Button>
</Form.Item>
</Form>
);
};

export default RegisterPage;

import React from "react";
import { Form, Input, Button } from "antd";

const RegisterPage = () => {
const onFinish = (values) => {
console.log('Received values of form: ', values);
// Add your registration logic here
};

return (
<Form
name="register"
onFinish={onFinish}
scrollToFirstError
>
<Form.Item
name="first_name"
label="First Name"
rules={[{ required: true, message: 'Please input your first name!' }]}
>
<Input />
</Form.Item>
<Form.Item
name="email"
label="E-mail"
rules={[{ required: true, message: 'Please input your E-mail!' }]}
>
<Input />
</Form.Item>

<Form.Item
name="password"
label="Password"
rules={[{ required: true, message: 'Please input your password!' }]}
hasFeedback
>
<Input.Password />
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
Register
</Button>
</Form.Item>
</Form>
);
};

export default RegisterPage;

3. Ensure Correct Package Usage: Make sure you are using the correct package for swizzling the auth page. According to the Discord support thread (https://discord.com/channels/837692625737613362/1225014053953470536), you should be using the @refinedev/antd package. By following these steps, you can add the first_name field to the user registration process in your refine application using Ant Design. For more detailed information, you can refer to the refine documentation (https://refine.dev/docs/ui-integrations/ant-design/introduction/) and the Supabase policy examples (https://supabase.com/docs/guides/storage#policy-examples). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5mo ago
<@661831547690680321> kapa.ai is still learning and improving, please let us know how it did by reacting below
sharp-indigo
sharp-indigoOP5mo ago
@kapa.ai how can i use it here
kapa.ai
kapa.ai5mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To add raw user metadata like "first_name" while registering a user using Ant Design (antd) in a refine application, you can follow these steps: 1. Set Up Supabase for User Metadata: Ensure that your Supabase database is set up to handle the additional metadata. Here is an example SQL script to add user metadata:
insert into public.users (id, full_name, avatar_url, first_name)
values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url', new.raw_user_meta_data->>'first_name');
return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_public_user();

insert into public.users (id, full_name, avatar_url, first_name)
values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url', new.raw_user_meta_data->>'first_name');
return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_public_user();

This script ensures that the first_name field is included in the user metadata. 2. Modify the Registration Form in Ant Design: When you swizzle the auth page, make sure to use Ant Design components to include the first_name field in the registration form. Here is an example of how you might modify the registration form:
import React from "react";
import { Form, Input, Button } from "antd";

const RegisterPage = () => {
const onFinish = (values) => {
console.log('Received values of form: ', values);
// Add your registration logic here
};

return (
<Form
name="register"
onFinish={onFinish}
scrollToFirstError
>
<Form.Item
name="first_name"
label="First Name"
rules={[{ required: true, message: 'Please input your first name!' }]}
>
<Input />
</Form.Item>
<Form.Item
name="email"
label="E-mail"
rules={[{ required: true, message: 'Please input your E-mail!' }]}
>
<Input />
</Form.Item>

<Form.Item
name="password"
label="Password"
rules={[{ required: true, message: 'Please input your password!' }]}
hasFeedback
>
<Input.Password />
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
Register
</Button>
</Form.Item>
</Form>
);
};

export default RegisterPage;

import React from "react";
import { Form, Input, Button } from "antd";

const RegisterPage = () => {
const onFinish = (values) => {
console.log('Received values of form: ', values);
// Add your registration logic here
};

return (
<Form
name="register"
onFinish={onFinish}
scrollToFirstError
>
<Form.Item
name="first_name"
label="First Name"
rules={[{ required: true, message: 'Please input your first name!' }]}
>
<Input />
</Form.Item>
<Form.Item
name="email"
label="E-mail"
rules={[{ required: true, message: 'Please input your E-mail!' }]}
>
<Input />
</Form.Item>

<Form.Item
name="password"
label="Password"
rules={[{ required: true, message: 'Please input your password!' }]}
hasFeedback
>
<Input.Password />
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
Register
</Button>
</Form.Item>
</Form>
);
};

export default RegisterPage;

3. Ensure Correct Package Usage: Make sure you are using the correct package for swizzling the auth page. According to the Discord support thread (https://discord.com/channels/837692625737613362/1225014053953470536), you should be using the @refinedev/antd package. By following these steps, you can add the first_name field to the user registration process in your refine application using Ant Design. For more detailed information, you can refer to the refine documentation (https://refine.dev/docs/ui-integrations/ant-design/introduction/) and the Supabase policy examples (https://supabase.com/docs/guides/storage#policy-examples). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5mo ago
<@661831547690680321> kapa.ai is still learning and improving, please let us know how it did by reacting below

Did you find this page helpful?