Examples

Finefoods Ant Design Admin Panel

Complete admin panel example built with Ant Design. Features authentication, dashboard and 10+ CRUD screens from orders to user management.

Code Demo

Finefoods Material UI Admin Panel

Complete admin panel example built with Material UI. Features authentication, dashboard and 10+ CRUD screens from orders to user management.

Code Demo

refine Swag Store

Complete headless e-commerce built on top of Medusa. Features a fully working solution with product listings, shopping cart and checkout.

Code Demo

Finefoods Storefront

Headless storefront example built with Tailwind CSS. Features product listings and a simple shopping cart. Supports SSR with NextJS.

Code Demo

Other Examples

Filters140 examples

Access Control Casbin

Access Control is a complex topic with a variety of sophisticated solutions that provide numerous functions. This example demonstrates how to use refine and Casbin to simplify access control management throughout your application.

Access Control

Access Control Cerbos

Access Control is a complex topic with a variety of sophisticated solutions that provide numerous functions. This example demonstrates how to use refine and Cerbos to simplify access control management throughout your application.

Access Control

Calendar

In this example you can see how Ant Design's Calendar component can be used with Refine data hooks.

Ant Design

Audit Log with Antd

refine allows you to track changes and who made them in your data by sending a new log event record whenever a new record is created, updated or deleted. This example demonstrates creating an audit log with Ant Design.

Audit Log Provider

Ant Design

Audit Log with Headless

refine allows you to track changes and who made them in your data by sending a new log event record whenever a new record is created, updated or deleted. This example demonstrates how to create an audit log provider.

Audit Log Provider

Auth Provider Auth0

Auth0 is a modular, API-first authentication and authorization service that you may use to add authentication and authorization to your apps. In this example, you'll see how to use Auth0 Login with refine.

Auth Provider

Auth Provider Google Auth

You can use Google Login to control access and provide identity for your app. This example will guide you through how to connect Google Login into your project using refine.

Auth Provider

Auth Provider Keycloak

Keycloak is a modular, API-first authentication and authorization service that you may use to add authentication and authorization to your apps. In this example, you'll see how to use Keycloak Login with refine.

Auth Provider

Auth Provider OTP Login

A one-time password(OTP) is a password that has two fundamental properties : it expires quickly, and it can’t be reused. OTPs are usually numeric or alphanumeric strings and are generated for a single login procedure. This example shows how to utilize OTP input logic with refine. You can use one-time passwords to access your application with refine AuthProvider.

Auth Provider

Authentication with Ant Design

You can create your own Authentication approach using refine. You can customize the AuthProvider methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with refine.

Ant Design

Auth Provider

Authentication with Chakra UI

Chakra UI

Auth Provider

Authentication Example

Headless

Auth Provider

Authentication with Mantine

Mantine

Auth Provider

Authentication with Material UI

Material UI

Auth Provider

Build Systems Monorepo with Lerna

Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository. In this example, you'll see how to use Lerna to setup a monorepo with refine.

Build Systems

Build Systems Using Nx

Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. In this example, you'll see how to use Nx with refine.

Build Systems

Build Systems Monorepo with Turbo

Turborepo is a high-performance build system for JavaScript and TypeScript codebases. In this example, you'll see how to use Turbo to setup a monorepo with refine.

Build Systems

Command Palette

kbar integration for `command`/`crtrl`+`k` interface for your refine App.

Command Palette

Refine's useImport hook

useImport example of @refinedev/core

Headless

Refine's useInfiniteList hook

useInfiniteList example of @refinedev/core

Headless

Refine's useMenu hook

useMenu example of @refinedev/core

Headless

Refine's useModal hook

useModal example of @refinedev/core

Headless

Refine's useSelect hook

useSelect example of @refinedev/core

Headless

Custom Footer

In your refine project, you can modify the design in a few simple steps. With refine, you can completely customize your layout to your preference. This example goes through how to add a Custom Footer in your refine project.

Customization

Custom Login Page

With refine, you may customize your Login pages to match your own case and demands. You can also manage your Custom Login Page with refine's Auth Provider hooks. This example explains how to create a basic custom login page.

Customization

Custom Sider

Creating your own Sider Menu with refine is quite simple. We have customize the default refine Sider Menu in this example. You can customize the sider menu of your refine project based examine this sample.

Customization

Custom Off Layout Area

With refine, you may manage your entire project. It does not limit you in any way, giving you complete creative control. This example shows how to customize and employ refine`s Off Layout Area in detail.

Customization

RTL Layout

This example shows how to use refine to manage and customize the content of your Layout. You may adapt and design your Layout content as you choose by examine this example and the source code.

Customization

Custom Theme Ant Design

You can customize design and theme in your project with refine. In this example, we have created an example application by customizing the default theme of refine. You can easily customize your theme as you wish in your refine project.

Ant Design

Customization

Custom Theme Chakra UI

Custom Theme Material UI

Material UI

Customization

Top Menu Layout

refine enables you to customize and organize your UI as you choose thanks to its strong customization capabilities. It is shown in this case how to modify the custom Top Menu Layout component.

Customization

Custom Pages with Ant Design

The feature to modify your project in detail is a major benefit of using refine. In this example, you learn how to include and manage your own Pages / Routes in your project.

Customization

Data Provider Airtable

By using refine`s full-featured Airtable Data Provider, it allows you to access your data quickly without any additional setup or coding. The following example will show you how to use your Airtable data within the refine project.

Data Provider

Data Provider Appwrite

Connect your Appwrite database with refine Appwrite Data Provider and take advantage of the features that allow you to list, filter or create data in it. refine also supports Realt-time updates from Appwrite Database! This example will show you how the refine Appwrite Data Provider works and is used.

Data Provider

Data Provider Directus

refine full-featured Directus Data Provider it allows you to get to your data quickly without requiring any additional setup or code. This example will show how to utilize the refine Directus Provider in this project.

Community

Data Provider

Data Provider Elide

Elide Data Provider allows you call Elide backend JSON api. Elide data provider builds the queries that Elide Application can understand, so we have done the hard work for you. This example will show how to utilize the refine Elide Provider in this project.

Community

Data Provider

Data Provider Hasura

Any REST or GraphQL custom backend work integrated with refine. refine Hasura GraphQL Data Provider comes out-of-the-box. Thanks to refine, you can connect to your Hasura database and create special queries and use your data easily. This example shows in detail how you can use the data in your Hasura database with refine project.

Data Provider

Live Provider

Data Provider Multiple Providers

refine's Multiple Data Provider feature allows you to connect multiple backends and manage their data with a single interface. This tutorial explains in detail how to use the Multiple Data Provider in your project.

Data Provider

Data Provider Nestjsx Crud

refine Nestjsx Crud Data Provider allows you to use your data on the frontend by connecting to your Nestjsx API. With refine, it perform these operations for you without having to write extra code for queries. By examining this example, you can learn how to use the Nestjsx Crud Data Provider.

Data Provider

Data Provider Nhost

refine Nhost GraphQL Data Provider comes out-of-the-box. Thanks to refine, you can connect to your Nhost database and create special queries and use your data easily. This example shows in detail how you can use the data in your Nhost database with refine project.

Data Provider

Live Provider

Data Provider Strapi

This example demonstrates how to quickly connect your Strapi data with a full-featured refine Strapi Data Provider without having to make any additional adjustments.

Data Provider

Auth Provider

Data Provider Strapi GraphQL

Strapi GraphQL is supported out-of-the-box by refine. Using your GraphQL data and creating custom queries is very easy using the refine Strapi-GraphQL provider. This example provides information on how to manage your Strapi-GraphQL data and how you can submit queries.

Data Provider

Auth Provider

Data Provider Strapi v4

refine supports all the features that come with Strapi-v4. In this example, how to manage your data with Refine Strapi-v4 Data Provider, CRUD operations and more is explained in detail.

Data Provider

Auth Provider

Data Provider Supabase

Connect your Supabase database with refine Supabase Data Provider and easily manage all the features that the database offers in your interface. This example will show you how Supabase Data Provider works and is used.

Data Provider

Live Provider

Auth Provider

Material UI useAutocomplete hook

This example shows how to use the useAutocomplete hook.

Material UI

Ant Design's useCheckboxGroup hook

The refine useCheckboxGroup hook allows you to manage your data in the form of checkboxes in an Ant Design Checkbox.Group component. In cases where users need to select more than one content, you can easily handle your transactions by using this hook. In the example below you can see how to create and manage checkboxes using the useCheckboxGroup hook.

Ant Design

Ant Design's useRadioGroup hook

You can use the refine useRadioGroup hook to manage your data in a source as an Ant Design Radio.Group component and create radio group buttons. This example simply shows how the useRadioGroup hook is used and how it works with the Ant Design Radio.Group component.

Ant Design

Ant Design's useSelect hook

When records in a resource need to be used as select options, the refine useSelect hook allows you to handle an Ant Design Select component. Also this hook includes out-of-the-box features such as fetchSize, sorting, and filtering. You may examine the code below to learn how to create and manage Select component with useSelect.

Ant Design

Ant Design's useSelect hook with infinite list

This example shows how to use the useSelect hook with an infinite list.

Ant Design

Form Ant Design Custom Form Validation

You can make basic validations with Ant Design Form.Item rules propertyp to the forms you have created with Refine. In addition, it allows you to make custom validations that you want or need. It is very easy to add your custom rules and validations by using the validator function within the Form.Item rules property. In the example below, a custom form validation process is explained in detail.

Form

Ant Design

Form Ant Design Server Side Form Validation

You can handle server-side form validation errors out-of-the-box with Ant Design useForm.

Form

Ant Design

Form Ant Design useDrawerForm

useDrawerForm hook allows you to access and manage the forms you've created in the Drawer Component. The code below may help you understand how to create and manage forms in a Drawer component.

Form

Ant Design

Form Ant Design useForm

refine useForm is a hook that helps you manage methods such as create, edit, and clone within the form. In this example, we constructed forms that you may use to create, edit, and clone posts using the userForm hook. You may look at the example to see how it's used.

Form

Ant Design

Form Ant Design useModalForm

With the useModalForm hook, you can manage a form inside of your modal component. It returns Ant Design Form and Modal props. You may examine the code below to learn how to create and manage forms within a modal.

Form

Ant Design

Form Ant Design useStepsForm

The useStepsForm hook is a method that allows you to split your form into multiple sections using an Ant Design Steps component, which can be used to manage your form. If your form contains multiple steps, as in the example below, it's pretty simple to manage and handle your Steps form using the refine useStepsForm hook.

Form

Ant Design

Form Chakra UI Server Side Form Validation

You can handle server-side form validation errors out-of-the-box with React Hook Form useForm.

Form

Chakra UI

React Hook Form

Form Chakra UI useDrawerForm

useModalForm hook allows you to manage a form within a modal as well as a drawer. It provides some useful methods to handle the form modal or form drawer. You can view the live example or review the source code to see how it's used with Material UI.

Form

Chakra UI

React Hook Form

Form Chakra UI useForm

refine allows you to use all the features of React Hook Form library with @refinedev/react-hook-form adapter. Using this package, you can create your own headless forms and use all the features provided by React Hook Form in your refine project in a compatible way. You can view the live example or review the source code to see how it's used with Material UI.

Form

Chakra UI

React Hook Form

Form Chakra UI useModalForm

useModalForm hook allows you to manage a form within a modal. It provides some useful methods to handle the form modal. You can view the live example or review the source code to see how it's used with Chakra UI.

Form

Chakra UI

React Hook Form

Save and Continue in Forms

refine provides you with the necessary methods to add this feature. This feature is familiar to Django users.

This example shows how to use the useForm hook.

Form

Headless

Form Mantine Server Side Form Validation

You can handle server-side form validation errors out-of-the-box with Mantine useForm.

Form

Mantine

Form Mantine useDrawerForm

Form

Mantine

Form Mantine useForm

refine works integrated with useForm of @mantine/form library. Using this package, you can use all the features provided by Mantine in your refine project in a compatible way. You can view the live example or review the source code to see how it's used with Mantine.

Form

Mantine

Form Mantine useModalForm

Form

Mantine

Form Mantine useStepsForm

useStepsForm allows you to manage a form with multiple steps. It provides features such as which step is currently active, the ability to go to a specific step and validation when changing steps etc. You can view the live example or review the source code to see how it's used with Mantine.

Form

Mantine

Form Material UI Server Side Form Validation

You can handle server-side form validation errors out-of-the-box with React Hook Form useForm.

Form

Material UI

Form Material UI useDrawerForm

Form

Material UI

React Hook Form

Form Material UI useForm

Form

Material UI

React Hook Form

Form Material UI useModalForm

Form

Material UI

React Hook Form

Form Material UI useStepsForm

Form

Material UI

React Hook Form

Form React Hook Form useForm

refine allows you to use all the features of React Hook Form library with @refinedev/react-hook-form adapter. Using this package, you can create your own headless forms and use all the features provided by React Hook Form in your refine project in a compatible way. For more information, you can view the live example or review the source code.

Form

Headless

React Hook Form

Form React Hook Form useModalForm

useModalForm hook allows you to manage a form within a modal. It provides some useful methods to handle the form modal. For more information, you can view the live example or review the source code.

Form

Headless

React Hook Form

Form React Hook Form useStepsForm

useStepsForm allows you to manage a form with multiple steps. It provides features such as which step is currently active, the ability to go to a specific step and validation when changing steps etc. For more information, you can view the live example or review the source code.

refine i18n Provider allows you to add mutiple language choices to your web application. The default language of refine is English. You can include and use your own translation in the project for different language preferences. This example shows how to use different language options and translations in practice.

i18n

i18n React

i18n

Import / Export CSV with Ant Design

refine allows you to export and import your data as CSV files. You can quickly do CSV import and export operation with refine by creating model operations on the CSV data.

CSV Import / Export

Import / Export CSV with Mantine

refine allows you to export and import your data as CSV files. You can quickly do CSV import and export operation with refine by creating model operations on the CSV data.

CSV Import / Export

Import / Export CSV with Material UI

refine allows you to export and import your data as CSV files. You can quickly do CSV import and export operation with refine by creating model operations on the CSV data.

CSV Import / Export

Custom Form Inputs with Ant Design

When working with form data, refine uses Ant Design's Form component. Ant Design enables us to create our own custom inputs within the Form.Item components. As a result, we may include our own custom input fields on the form. We use the Custom Input to enter a new value for the Content field in this example. If you want to add custom inputs to your project, you can follow this example and have information about how it is used.

Ant Design

Customization

Custom Date Picker with Ant Design

While creating a record with refine, you may use the Ant Design Date Picker component directly in your refine project if you need date information. We utilized the Date Picker component to obtain 'Published At' date data while creating a post in this example. You may examine the code below to learn how to use and manage Date Picker Component in your project.

Ant Design

Customization

Refine with JavaScript

Refine supports you to develop with JavaScript. All features of refine can be used with JavaScript. In our example below, we developed the tutorial with Ant Design selection entirely with JavaScript. You can learn more by following the live example.

JavaScript

Refine's useSimpleList hook

refine's useSimpleList hook allows you to get your data straight from the API. This data is compatible with Ant Design List and can be used in it. Furthermore, this hook includes out-of-the-box features such as pagination, sorting, and filtering. In this example, how to use useSimpleList is explained in detail.

Ant Design

Live Provider Ably

The liveProvider is a powerful tool for developers who want to create an interactive app experience that can be updated in Realtime. This is an example of refine that you can use to manage your data in Realtime.

Live Provider

Meta Properties Example

In this example, we will show you how to use the meta property to pass additional parameters to the data provider methods. It contains the following features:

Data Provider

Multi Level Menu Multi Level Menu

The multi-level menu will provide you with the necessary infrastructure to create your resources with the priority.

Customization

Mutation Modes

Mutation mode determines which mode the mutation runs with. Mutations can run under three different modes: pessimistic, optimistic and undoable. You can experience them with this app.

Form

Next.js Authentication

refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple refine app in Next.js with Authentication features.

Next.js

Auth Provider

Next.js Authentication with NextAuth.js

refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple refine app in Next.js and NextAuth.js with Authentication features.

Next.js

Auth Provider

Next.js Next.js

refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple SSR supported CMS Admin panel.

Next.js

Next.js With `app/` Directory

refine allows you to use the app/ structure in your Next.js apps. To learn more about the app/ directory, check out Next.js app docs. In this example you will find how to use the app/ directory with refine.

Next.js

Notification Provider React Toastify

With refine Notification Provider, you can show notification messages in your application anywhere. These may be warnings or errors that advise an action and help maintain user engagement with the app's functionality. You can use any notification library and manage them with refine's useNotification hook! In this example we used the React Toastify library to show notifications.

Headless

Notification Provider

Persist Query

You can use the persitQueryClient feature of react-query with refine. Different persisters can be used to store your client and cache to many different storage layers.

Headless

Remix Ant Design

refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to make a simple SSR supported CMS Admin panel using Ant Design.

Remix

Ant Design

Remix Authentication with remix Auth

refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to authorize with Google, Auth0 and Keycloak using remix-auth.

Remix

Auth Provider

Remix Headless

refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to make a simple SSR supported headless (without any style/component) CRUD App.

Remix

Headless

Remix Material UI

refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to make a simple SSR supported CMS Admin panel using Material UI.

Remix

Material UI

Search Component with Ant Design

This example explains in detail how to create a Search component using Ant Design `` in your refine project.

Ant Design

Customization

Storybook with Ant Design

Storybook with Ant Design is an example application.

Ant Design

Storybook

Storybook with Material UI

Storybook with Material UI is an example application.

Material UI

Storybook

Advanced Ant Design Table

Multiple record deletion, modification, and other features can be used simultaneously in a table. It's an example of a Advanced Table made with refine's customization feature.

Table

Ant Design

Filtering on Ant Design Table

The Table Filter option allows you to apply filters to the data in your table. The example below demonstrates how you might filter and display data in your table based on certain field parameters.

Table

Ant Design

Ant Design useDeleteMany Hook

The useDeleteMany is one of refine's data hooks. It removes more than one data from the database. We used the useDeleteMany hook to remove more than one record from our table in this scenario. On your table, you may remove multiple records by selecting them and pressing delete. You can get more information by examining the example.

Table

Ant Design

Ant Design useEditableTable Hook

useEditableTable, includes all of the capabilities of useTable. It also enables you to edit your Table in addition to these advantages. It returns Ant Design Table and Form components props.

Table

Ant Design

Ant Design useTable Hook

You may use the useTable hook to process your data with features compatible with the Ant Design Table Component. You can be used as an out-of-the-box feature without needing to do extra operations for sorting, filtering, and pagination.

Table

Ant Design

Ant Design useUpdateMany Hook

useUpdateMany is one of refine's data hooks. It performs the process of updating more than one data. In this example, we used the useUpdateMany hook to edit multiple data on the table. You can edit more than one data by selecting the rows you want to edit on your table. You can get more information by examining the example.

Table

Ant Design

Advanced React Table with Chakra UI

It is an example of Chakra UI Advanced React Table created with refine's @refinedev/react-table adapter. In addition to the Chakra UI Basic React Table example, deletion editing and filtering features are used together in your table. For more information, you can view the live example or review the source code to see how it's used with Chakra UI.

Table

Chakra UI

React Table

Basic React Table with Chakra UI

refine allows you to use all the features of React Table with @refinedev/react-table adapter. In this way, you can manage your server-side data operations. By using this adapter, you can directly use all the features of React Table in your refine project. For more information, you can view the live example or review the source code to see how it's used with Chakra UI.

Handsontable is a full featured spreadsheet editor. You can develop applications with spreadsheet-like UX using Handsontable and Refine.

Table

Advanced React Table with Mantine

It is an example of Mantine Advanced React Table created with refine's @refinedev/react-table adapter. In addition to the Mantine Basic React Table example, deletion editing and filtering features are used together in your table. For more information, you can view the live example or review the source code to see how it's used with Mantine.

Table

Mantine

React Table

Basic React Table with Mantine

Table

Mantine

React Table

Advanced Material UI Table

Advanced table examples with useDataGrid and useTable created with refine's @refinedev/react-table adapter.

Table

Material UI

Cursor Pagination

Cursor Pagination is a pagination method and Material UI supports it by default. This sample application shows how to use it.

Table

Material UI

Filtering on Material UI Table

The Table Filter option allows you to apply filters to the data in your table. The example below demonstrates how you might filter and display data in your table based on certain field parameters.

Table

Material UI

Material UI's useDataGrid Hook

You may use the useDataGrid hook to process your data with features compatible with the MUI X DataGrid and DataGridPro component. You can be used as an out-of-the-box feature without needing to do extra operations for sorting, filtering, and pagination.

Table

Material UI

Material UI useDeleteMany Hook

Table

Material UI

Material UI useUpdateMany Hook

Table

Material UI

Advanced React Table

It is an example of Advanced React Table created with refine's @refinedev/react-table adapter. In addition to the Basic React Table example, deletion editing and filtering features are used together in your table. For more information, you can view the live example or review the source code.

You can use predefined themes provided by refine. In this example, we have created an example application by using the RefineThemes from @refinedev/antd. You can easily customize your theme as you wish in your refine project.

Ant Design

Customization

Chakra UI

You can use predefined themes provided by refine. In this example, we have created an example application by using the RefineThemes from @refinedev/chakra-ui. You can easily customize your theme as you wish in your refine project.

Chakra UI

Customization

Mantine

You can use predefined themes provided by refine. In this example, we have created an example application by using the RefineThemes from @refinedev/mantine. You can easily customize your theme as you wish in your refine project.

Mantine

Customization

Material UI

You can use predefined themes provided by refine. In this example, we have created an example application by using the RefineThemes from @refinedev/mui. You can easily customize your theme as you wish in your refine project.

Material UI

Customization

Ant Design Tutorial

It is the example created at the end of the tutorial with Ant Design selection.

Ant Design

Tutorial

Chakra UI Tutorial

It is the example created at the end of the tutorial with Chakra UI selection.

Chakra UI

Tutorial

Headless Tutorial

It is the example created at the end of the tutorial with headless selection.

Headless

Tutorial

Mantine Tutorial

It is the example created at the end of the tutorial with Mantine selection.

Mantine

Tutorial

Material UI Tutorial

It is the example created at the end of the tutorial with Material UI selection.

Material UI

Tutorial

UseModal Hook

You can use the useModal hook to manage an Ant Design Modal. This hook offers you all options for controlling an Ant Design Modal. We've demonstrated how to utilize a Modal in basic form using the useModal hook in this example.

Ant Design

Upload Ant Design Base64 Upload

refine allows you to upload your files or images in your forms as Base64 Upload. When uploading a file or an image to a source, you can complete your upload by encoding it to Base64. In this example, you'll learn how to use refine's file2Base64 function to upload a file as Base64.

Ant Design

Upload

Upload Ant Design Multipart Upload

Multipart Upload is supported by the refine. With refine, you may upload any file using Multipart Upload logic. In this example we showed you how to upload images with Multipart Upload to a resource. Check out the live example for more information.

Ant Design

Upload

Upload Chakra UI Base64 Upload

In this example, you'll learn how to do base64 upload in refine with useForm. For more information, you can view the live example or review the source code.

Chakra UI

Upload

Upload Chakra UI Multipart Upload

In this example, you'll learn how to do multipart upload in refine with useForm. For more information, you can view the live example or review the source code.

Chakra UI

Upload

Upload Mantine Base64 Upload

In this example, you'll learn how to do base64 upload in refine with useForm. For more information, you can view the live example or review the source code.

Mantine

Upload

Upload Mantine Multipart Upload

In this example, you'll learn how to do multipart upload in refine with useForm. For more information, you can view the live example or review the source code.

Mantine

Upload

Upload Material UI Base64 Upload

In this example, you'll learn how to do base64 upload in refine with React Hook Form. For more information, you can view the live example or review the source code.

Material UI

Upload

Upload Material UI Multipart Upload

In this example, you'll learn how to do multipart upload in refine with React Hook Form. For more information, you can view the live example or review the source code.

Material UI

Upload

Web3 Sign In with Ethereum

A web3 wallet is a type of cryptocurrency wallet that allows you to send, receive, and store digital assets without the need for a third party. This example demonstrates how to log-in to our refine project with Ethereum and connect your Metamask Web3 wallet. You can also learn how to send test ethereum with Metamask using the refine UI and how transactions are handled in this example.

Auth Provider