diff --git a/apps/docs/components/Frameworks.tsx b/apps/docs/components/Frameworks.tsx index a1b6d0da29b..94464c4c395 100644 --- a/apps/docs/components/Frameworks.tsx +++ b/apps/docs/components/Frameworks.tsx @@ -85,6 +85,14 @@ const Frameworks = () => { }, href: '/guides/with-vue-3', }, + { + name: 'refine', + logo: { + light: '/docs/img/icons/refine-icon.svg', + dark: '/docs/img/icons/refine-icon.svg', + }, + href: '/guides/getting-started/tutorials/with-refine', + }, ] return (
diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx index 3bf27c6b2a0..597e64e8174 100644 --- a/apps/docs/components/HomePageCover.tsx +++ b/apps/docs/components/HomePageCover.tsx @@ -48,6 +48,11 @@ const HomePageCover = (props) => { icon: '/docs/img/icons/nuxt-icon', href: '/guides/getting-started/quickstarts/nuxtjs', }, + { + tooltip: 'refine', + icon: '/docs/img/icons/refine-icon', + href: '/guides/getting-started/quickstarts/refine', + }, ] const GettingStarted = () => ( diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index eb2e7ccacb6..bae30f2aec3 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -218,6 +218,7 @@ export const gettingstarted: NavMenuConstant = { { name: 'SvelteKit', url: '/guides/getting-started/quickstarts/sveltekit' }, { name: 'SolidJS', url: '/guides/getting-started/quickstarts/solidjs' }, { name: 'Vue', url: '/guides/getting-started/quickstarts/vue' }, + { name: 'refine', url: '/guides/getting-started/quickstarts/refine' }, ], }, { @@ -259,6 +260,10 @@ export const gettingstarted: NavMenuConstant = { name: 'SvelteKit', url: '/guides/getting-started/tutorials/with-sveltekit', }, + { + name: 'refine', + url: '/guides/getting-started/tutorials/with-refine', + }, ], }, { diff --git a/apps/docs/pages/guides/getting-started.mdx b/apps/docs/pages/guides/getting-started.mdx index 292476570e9..16766d4017f 100644 --- a/apps/docs/pages/guides/getting-started.mdx +++ b/apps/docs/pages/guides/getting-started.mdx @@ -178,6 +178,13 @@ export const quickstarts = [ 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Vue app.', icon: '/docs/img/icons/vuejs-icon', }, + { + title: 'refine', + href: '/guides/getting-started/quickstarts/refine', + description: + 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a refine app.', + icon: '/docs/img/icons/refine-icon', + }, ] export const webapps = [ @@ -237,6 +244,13 @@ export const webapps = [ 'Learn how to build a user management app with SvelteKit and Supabase Database, Auth, and Storage functionality.', icon: '/docs/img/icons/svelte-icon', }, + { + title: 'refine', + href: '/guides/getting-started/tutorials/with-refine', + description: + 'Learn how to build a user management app with refine and Supabase Database, Auth, and Storage functionality.', + icon: '/docs/img/icons/refine-icon', + }, ] export const mobile = [ diff --git a/apps/docs/pages/guides/getting-started/quickstarts/refine.mdx b/apps/docs/pages/guides/getting-started/quickstarts/refine.mdx new file mode 100644 index 00000000000..4bc37f973df --- /dev/null +++ b/apps/docs/pages/guides/getting-started/quickstarts/refine.mdx @@ -0,0 +1,248 @@ +import Layout from '~/layouts/DefaultGuideLayout' +import StepHikeCompact from '~/components/StepHikeCompact' + +export const meta = { + title: 'Use Supabase with refine', + subtitle: + 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a refine app.', + breadcrumb: 'Framework Quickstarts', +} + + + + + + + [Create a new project](https://app.supabase.com) in the Supabase Dashboard. + + After your project is ready, create a table in your Supabase database using the [SQL Editor](https://app.supabase.com/project/_/sql) in the Dashboard. Use the following SQL statement to create a `countries` table with some sample data. + + + + + + ```sql SQL_EDITOR + -- Create the table + CREATE TABLE countries ( + id SERIAL PRIMARY KEY, + name VARCHAR(255) NOT NULL + ); + -- Insert some sample data into the table + INSERT INTO countries (name) VALUES ('United States'); + INSERT INTO countries (name) VALUES ('Canada'); + INSERT INTO countries (name) VALUES ('Mexico'); + ```` + + + + + + + + + + Create a [refine](https://github.com/refinedev/refine) app using the [create refine-app](https://refine.dev/docs/getting-started/quickstart/). + + The `refine-supabase` preset adds `@refinedev/supabase` supplementary package that supports Supabase in a refine app. `@refinedev/supabase` out-of-the-box includes the Supabase dependency: [supabase-js](https://github.com/supabase/supabase-js). + + + + + + ```bash Terminal + npm create refine-app@latest -- --preset refine-supabase my-app + ``` + + + + + + + + + You will develop your app, connect to the Supabase backend and run the refine app in VS Code. + + + + + + ```bash Terminal + cd my-app + code . + ``` + + + + + + + + + Start the app, go to http://localhost:5173 in a browser, and you should be greeted with the refine Welcome page. + + + + + + ```bash Terminal + npm run dev + ``` + + + ![refine welcome page](/docs/img/refine-qs-welcome-page.png) + + + + + + + + + + You now have to update the `supabaseClient` with the `SUPABASE_URL` and `SUPABASE_KEY` of your Supabase API. The `supabaseClient` is used in auth provider and data provider methods that allow the refine app to connect to your Supabase backend. + + + + + + ```ts src/utility/supabaseClient.ts + import { createClient } from "@refinedev/supabase"; + + const SUPABASE_URL = YOUR_SUPABASE_URL; + const SUPABASE_KEY = YOUR_SUPABASE_KEY + + export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, { + db: { + schema: "public", + }, + auth: { + persistSession: true, + }, + }); + ``` + + + + + + + + + You have to then configure resources and define pages for `countries` resource. + + Use the following command to automatically add resources and generate code for pages for `countries` using refine Inferencer. + + This defines pages for `list`, `create`, `show` and `edit` actions inside the `src/pages/countries/` directory with `` component. + + The `` component depends on `@refinedev/react-table` and `@refinedev/react-hook-form` packages. In order to avoid errors, you should install them as dependencies with `npm install @refinedev/react-table @refinedev/react-hook-form`. + + + The `` is a refine Inferencer component that automatically generates necessary code for the `list`, `create`, `show` and `edit` pages. + + More on [how the Inferencer works is available in the docs here](https://refine.dev/docs/packages/documentation/inferencer/). + + + + + + + + ```bash Terminal + npm run refine create-resource countries + ``` + + + + + + + + Add routes for the `list`, `create`, `show`, and `edit` pages. + + + You should remove the `index` route for the Welcome page presented with the `` component. + + + + + + ```tsx src/App.tsx + import { Refine, WelcomePage } from "@refinedev/core"; + import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar"; + import routerBindings, { + DocumentTitleHandler, + NavigateToResource, + UnsavedChangesNotifier, + } from "@refinedev/react-router-v6"; + import { dataProvider, liveProvider } from "@refinedev/supabase"; + import { BrowserRouter, Route, Routes } from "react-router-dom"; + + import "./App.css"; + import authProvider from "./authProvider"; + import { supabaseClient } from "./utility"; + import { CountriesCreate, CountriesEdit, CountriesList, CountriesShow } from "./pages/countries"; + + function App() { + return ( + + + + + } + /> + + } /> + } /> + } /> + } /> + + + + + + + + + ); + } + + export default App; + ``` + + + + + + + + Now you should be able to see the countries pages along the `/countries` routes. You may now edit and add new countries using the Inferencer generated UI. + + The Inferencer auto-generated code gives you a good starting point on which to keep building your `list`, `create`, `show` and `edit` pages. They can be obtained by clicking the `Show the auto-generated code` buttons in their respective pages. + + + + ![refine List Page](/docs/img/refine-qs-countries-ui.png) + + + + + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-refine.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-refine.mdx new file mode 100644 index 00000000000..5c1487153f2 --- /dev/null +++ b/apps/docs/pages/guides/getting-started/tutorials/with-refine.mdx @@ -0,0 +1,638 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + title: 'Build a User Management App with refine', + description: 'Learn how to use Supabase in your refine App.', +} + + + +![Supabase User Management example](/docs/img/user-management-demo.png) + + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/refine-user-management). + + +## About refine + +[refine](https://github.com/refinedev/refine) is a React-based framework used to rapidly build data-heavy applications like admin panels, dashboards, storefronts and any type of CRUD apps. It separates app concerns into individual layers, each backed by a React context and respective provider object. For example, the auth layer represents a context served by a specific set of [`authProvider`](https://refine.dev/docs/tutorial/understanding-authprovider/index/) methods that carry out authentication and authorization actions such as logging in, logging out, getting roles data, etc. Similarly, the data layer offers another level of abstraction that is equipped with [`dataProvider`](https://refine.dev/docs/tutorial/understanding-dataprovider/index/) methods to handle CRUD operations at appropriate backend API endpoints. + +refine provides hassle-free integration with Supabase backend with its supplementary [`@refinedev/supabase`](https://github.com/refinedev/refine/tree/master/packages/supabase) package. It generates `authProvider` and `dataProvider` methods at project initialization, so we don't need to expend much effort to define them ourselves. We just need to choose Supabase as our backend service while creating the app with `create refine-app`. + + + It is possible to customize the `authProvider` for Supabase and as we'll see below, it can be + tweaked from `src/authProvider.ts` file. In contrast, the Supabase `dataProvider` is part of + `node_modules` and therefore is not subject to modification. + + + + +## Building the App + +Let's start building the refine app from scratch. + +### Initialize a refine app + +We can use [create refine-app](https://refine.dev/docs/tutorial/getting-started/headless/create-project/#launch-the-refine-cli-setup) command to initialize +an app. Run the following in the terminal: + +```bash +npm create refine-app@latest -- --preset refine-supabase +``` + +In the above command, we are using the `refine-supabase` preset which chooses the Supabase supplementary package for our app. We are not using any UI framework, so we'll have a headless UI with plain React and CSS styling. + +The `refine-supabase` preset installs the `@refinedev/supabase` package which out-of-the-box includes the Supabase dependency: [supabase-js](https://github.com/supabase/supabase-js). + +We also need to install `@refinedev/react-hook-form` and `react-hook-form` packages that allow us to use [React Hook Form](https://react-hook-form.com) inside refine apps. Run: + +```bash +npm install @refinedev/react-hook-form react-hook-form +``` + +With the app initialized and packages installed, at this point before we begin discussing refine concepts, let's try running the app: + +```bash +cd app-name +npm run dev +``` + +We should have a running instance of the app with a Welcome page at `http://localhost:5173`. + +Let's move ahead to understand the generated code now. + +### refine `supabaseClient` + +The `create refine-app` generated a Supabase client for us in the `src/utility/supabaseClient.ts` file. It has two constants: `SUPABASE_URL` and `SUPABASE_KEY`. We want to replace them as `supabaseUrl` and `supabaseAnonKey` respectively and assign them our own Supabase server's values. + +We'll update it with environment variables managed by Vite: + +```ts src/utility/supabaseClient.ts +import { createClient } from '@refinedev/supabase' + +const supabaseUrl = import.meta.env.VITE_SUPABASE_URL +const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY + +export const supabaseClient = createClient(supabaseUrl, supabaseAnonKey, { + db: { + schema: 'public', + }, + auth: { + persistSession: true, + }, +}) +``` + +And then, we want to save the environment variables in a `.env.local` file. All you need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys). + +```bash .env.local +VITE_SUPABASE_URL=YOUR_SUPABASE_URL +VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY +``` + +The `supabaseClient` will be used in fetch calls to Supabase endpoints from our app. As we'll see below, the client is instrumental in implementing authentication using refine's auth provider methods and CRUD actions with appropriate data provider methods. + +One optional step is to update the CSS file `src/App.css` to make the app look nice. +You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/refine-user-management/src/App.css). + +In order for us to add login and user profile pages in this App, we have to tweak the `` component inside `App.tsx`. + +### The `` Component + +The `App.tsx` file initially looks like this: + +```tsx src/App.tsx +import { Refine, WelcomePage } from '@refinedev/core' +import { RefineKbar, RefineKbarProvider } from '@refinedev/kbar' +import routerBindings, { + DocumentTitleHandler, + UnsavedChangesNotifier, +} from '@refinedev/react-router-v6' +import { dataProvider, liveProvider } from '@refinedev/supabase' +import { BrowserRouter, Route, Routes } from 'react-router-dom' + +import './App.css' +import authProvider from './authProvider' +import { supabaseClient } from './utility' + +function App() { + return ( + + + + + } /> + + + + + + + + ) +} + +export default App +``` + +We'd like to focus on the [``](https://refine.dev/docs/api-reference/core/components/refine-config/) component, which comes with several props passed to it. Notice the `dataProvider` prop. It uses a `dataProvider()` function with `supabaseClient` passed as argument to generate the data provider object. The `authProvider` object also uses `supabaseClient` in implementing its methods. You can look it up in `src/authProvider.ts` file. + +## Customize `authProvider` + +If you examine the `authProvider` object you can notice that it has a `login` method that implements a OAuth and Email / Password strategy for authentication. We'll, however, remove them and use Magic Links to allow users sign in with their email without using passwords. + +We want to use `supabaseClient` auth's `signInWithOtp` method inside `authProvider.login` method: + +```ts +login: async ({ email }) => { + try { + const { error } = await supabaseClient.auth.signInWithOtp({ email }); + + if (!error) { + alert("Check your email for the login link!"); + return { + success: true, + }; + }; + + throw error; + } catch (e: any) { + alert(e.message); + return { + success: false, + e, + }; + } +}, +``` + +We also want to remove `register`, `updatePassword`, `forgotPassword` and `getPermissions` properties, which are optional type members and also not necessary for our app. The final `authProvider` object looks like this: + +```ts src/authProvider.ts +import { AuthBindings } from '@refinedev/core' + +import { supabaseClient } from './utility' + +const authProvider: AuthBindings = { + login: async ({ email }) => { + try { + const { error } = await supabaseClient.auth.signInWithOtp({ email }) + + if (!error) { + alert('Check your email for the login link!') + return { + success: true, + } + } + + throw error + } catch (e: any) { + alert(e.message) + return { + success: false, + e, + } + } + }, + logout: async () => { + const { error } = await supabaseClient.auth.signOut() + + if (error) { + return { + success: false, + error, + } + } + + return { + success: true, + redirectTo: '/', + } + }, + onError: async (error) => { + console.error(error) + return { error } + }, + check: async () => { + try { + const { data } = await supabaseClient.auth.getSession() + const { session } = data + + if (!session) { + return { + authenticated: false, + error: { + message: 'Check failed', + name: 'Session not found', + }, + logout: true, + redirectTo: '/login', + } + } + } catch (error: any) { + return { + authenticated: false, + error: error || { + message: 'Check failed', + name: 'Not authenticated', + }, + logout: true, + redirectTo: '/login', + } + } + + return { + authenticated: true, + } + }, + getIdentity: async () => { + const { data } = await supabaseClient.auth.getUser() + + if (data?.user) { + return { + ...data.user, + name: data.user.email, + } + } + + return null + }, +} + +export default authProvider +``` + +### Set up a Login component + +We have chosen to use the headless refine core package that comes with no supported UI framework. So, let's set up a plain React component to manage logins and sign ups. + +Create and edit `src/components/auth.tsx`: + +```ts src/components/auth.tsx +import { useState } from 'react' +import { useLogin } from '@refinedev/core' + +export default function Auth() { + const [email, setEmail] = useState('') + const { isLoading, mutate: login } = useLogin() + + const handleLogin = async (event: { preventDefault: () => void }) => { + event.preventDefault() + login({ email }) + } + + return ( +
+
+

Supabase + refine

+

Sign in via magic link with your email below

+
+
+ setEmail(e.target.value)} + /> +
+
+ +
+
+
+
+ ) +} +``` + +Notice we are using the [`useLogin()`](https://refine.dev/docs/api-reference/core/hooks/authentication/useLogin/) refine auth hook to grab the `mutate: login` method to use inside `handleLogin()` function and `isLoading` state for our form submission. The `useLogin()` hook conveniently offers us access to `authProvider.login` method for authenticating the user with OTP. + +### Account page + +After a user is signed in we can allow them to edit their profile details and manage their account. + +Let's create a new component for that in `src/components/account.tsx`. + +```tsx src/components/account.tsx +import { BaseKey, useGetIdentity, useLogout } from '@refinedev/core' +import { useForm } from '@refinedev/react-hook-form' + +interface IUserIdentity { + id?: BaseKey + username: string + name: string +} + +export interface IProfile { + id?: string + username?: string + website?: string + avatar_url?: string +} + +export default function Account() { + const { data: userIdentity } = useGetIdentity() + + const { mutate: logOut } = useLogout() + + const { + refineCore: { formLoading, queryResult, onFinish }, + register, + control, + handleSubmit, + } = useForm({ + refineCoreProps: { + resource: 'profiles', + action: 'edit', + id: userIdentity?.id, + redirect: false, + onMutationError: (data) => alert(data?.message), + }, + }) + + return ( +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+ +
+ +
+
+
+ ) +} +``` + +Notice above that, we are using three refine hooks, namely the [`useGetIdentity()`](https://refine.dev/docs/api-reference/core/hooks/authentication/useGetIdentity/), [`useLogOut()`](https://refine.dev/docs/api-reference/core/hooks/authentication/useLogout/) and [`useForm()`](https://refine.dev/docs/packages/documentation/react-hook-form/useForm/) hooks. + +`useGetIdentity()` is a auth hook that gets the identity of the authenticated user. It grabs the current user by invoking the `authProvider.getIdentity` method under the hood. + +`useLogOut()` is also an auth hook. It calls the `authProvider.logout` method to end the session. + +`useForm()`, in contrast, is a data hook that exposes a series of useful objects that serve the edit form. For example, we are grabbing the `onFinish` function to submit the form with the `handleSubmit` event handler. We are aslo using `formLoading` property to present state changes of the submitted form. + +The `useForm()` hook is a higher-level hook built on top of refine's `useForm()` core hook. It fully supports form state management, field validation and submission using React Hook Form. Behind the scenes, it invokes the `dataProvider.getOne` method to get the user profile data from our Supabase `/profiles` endpoint and also invokes `dataProvider.update` method when `onFinish()` is called. + +### Launch! + +Now that we have all the components in place, let's define the routes for the pages in which they should be rendered. + +Add the routes for `/login` with the `` component and the routes for `index` path with the `` component. So, the final `App.tsx`: + +```tsx src/App.tsx +import { Authenticated, Refine } from '@refinedev/core' +import { RefineKbar, RefineKbarProvider } from '@refinedev/kbar' +import routerBindings, { + CatchAllNavigate, + DocumentTitleHandler, + UnsavedChangesNotifier, +} from '@refinedev/react-router-v6' +import { dataProvider, liveProvider } from '@refinedev/supabase' +import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom' + +import './App.css' +import authProvider from './authProvider' +import { supabaseClient } from './utility' +import Account from './components/account' +import Auth from './components/auth' + +function App() { + return ( + + + + + }> + + + } + > + } /> + + } />}> + } /> + + + + + + + + + ) +} + +export default App +``` + +Let's test the App by running the server again: + +```bash +npm run dev +``` + +And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app. + +![Supabase refine](/docs/img/supabase-refine-demo.png) + +## Bonus: Profile photos + +Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos. + +### Create an upload widget + +Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component: + +Create and edit `src/components/avatar.tsx`: + +```tsx src/components/avatar.tsx +import { useEffect, useState } from 'react' +import { supabaseClient } from '../utility/supabaseClient' + +type TAvatarProps = { + url?: string + size: number + onUpload: (filePath: string) => void +} + +export default function Avatar({ url, size, onUpload }: TAvatarProps) { + const [avatarUrl, setAvatarUrl] = useState('') + const [uploading, setUploading] = useState(false) + + useEffect(() => { + if (url) downloadImage(url) + }, [url]) + + async function downloadImage(path: string) { + try { + const { data, error } = await supabaseClient.storage.from('avatars').download(path) + if (error) { + throw error + } + const url = URL.createObjectURL(data) + setAvatarUrl(url) + } catch (error: any) { + console.log('Error downloading image: ', error?.message) + } + } + + async function uploadAvatar(event: React.ChangeEvent) { + try { + setUploading(true) + + if (!event.target.files || event.target.files.length === 0) { + throw new Error('You must select an image to upload.') + } + + const file = event.target.files[0] + const fileExt = file.name.split('.').pop() + const fileName = `${Math.random()}.${fileExt}` + const filePath = `${fileName}` + + const { error: uploadError } = await supabaseClient.storage + .from('avatars') + .upload(filePath, file) + + if (uploadError) { + throw uploadError + } + onUpload(filePath) + } catch (error: any) { + alert(error.message) + } finally { + setUploading(false) + } + } + + return ( +
+ {avatarUrl ? ( + Avatar + ) : ( +
+ )} +
+ + +
+
+ ) +} +``` + +### Add the new widget + +And then we can add the widget to the Account page at `src/components/account.tsx`: + +```tsx src/components/account.tsx +// Import the new components +import { Controller } from 'react-hook-form' +import Avatar from './avatar' + +// ... + +return ( +
+
+ { + return ( + { + onFinish({ + ...queryResult?.data?.data, + avatar_url: filePath, + onMutationError: (data: { message: string }) => alert(data?.message), + }) + field.onChange({ + target: { + value: filePath, + }, + }) + }} + /> + ) + }} + /> + {/* ... */} + +
+) +``` + +### Storage management + + + +At this stage, you have a fully functional application! + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/public/img/icons/refine-icon.svg b/apps/docs/public/img/icons/refine-icon.svg new file mode 100644 index 00000000000..7f2e1f8d82c --- /dev/null +++ b/apps/docs/public/img/icons/refine-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/docs/public/img/refine-qs-countries-ui.png b/apps/docs/public/img/refine-qs-countries-ui.png new file mode 100644 index 00000000000..e062c721878 Binary files /dev/null and b/apps/docs/public/img/refine-qs-countries-ui.png differ diff --git a/apps/docs/public/img/refine-qs-welcome-page.png b/apps/docs/public/img/refine-qs-welcome-page.png new file mode 100644 index 00000000000..376740a35f7 Binary files /dev/null and b/apps/docs/public/img/refine-qs-welcome-page.png differ diff --git a/apps/docs/public/img/supabase-refine-demo.png b/apps/docs/public/img/supabase-refine-demo.png new file mode 100644 index 00000000000..6a8f15ff6ed Binary files /dev/null and b/apps/docs/public/img/supabase-refine-demo.png differ diff --git a/examples/user-management/refine-user-management/.eslintrc.cjs b/examples/user-management/refine-user-management/.eslintrc.cjs new file mode 100644 index 00000000000..595490efccc --- /dev/null +++ b/examples/user-management/refine-user-management/.eslintrc.cjs @@ -0,0 +1,16 @@ +/* eslint-env node */ + +module.exports = { + env: { browser: true, es2020: true }, + extends: [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react-hooks/recommended", + ], + parser: "@typescript-eslint/parser", + parserOptions: { ecmaVersion: "latest", sourceType: "module" }, + plugins: ["react-refresh"], + rules: { + "react-refresh/only-export-components": "warn", + }, +}; diff --git a/examples/user-management/refine-user-management/.gitignore b/examples/user-management/refine-user-management/.gitignore new file mode 100644 index 00000000000..24cdedf82f1 --- /dev/null +++ b/examples/user-management/refine-user-management/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* \ No newline at end of file diff --git a/examples/user-management/refine-user-management/.npmrc b/examples/user-management/refine-user-management/.npmrc new file mode 100644 index 00000000000..acb88cc765e --- /dev/null +++ b/examples/user-management/refine-user-management/.npmrc @@ -0,0 +1,2 @@ +legacy-peer-deps=true +strict-peer-dependencies=false \ No newline at end of file diff --git a/examples/user-management/refine-user-management/README.MD b/examples/user-management/refine-user-management/README.MD new file mode 100644 index 00000000000..fe6e8da2b15 --- /dev/null +++ b/examples/user-management/refine-user-management/README.MD @@ -0,0 +1,121 @@ +# Supabase refine User Management + +This repo is a quick sample of how you can get started building apps using [refine](https://github.com/refinedev/refine) and Supabase: users can sign up with a magic link and then update their account with public profile information, including a profile image. + + + +## About refine + +[refine](https://github.com/refinedev/refine) is a React-based framework for building data-intensive applications in no time ✨ + +refine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to admin panels, B2B applications and dashboards. + + +- To learn more about **refine**, please check out the [Documentation](https://refine.dev/docs) +- [Step up to refine tutorials.](https://refine.dev/docs/tutorial/introduction/index/) + +## Available Scripts +### Running the development server. + +```bash +npm run dev +``` + +### Building for production. + +```bash +npm run build +``` + + +## Build from scratch + +### 1. Create new project + +Sign up to Supabase - [https://app.supabase.com](https://app.supabase.com) and create a new project. Wait for your database to start. + +### 2. Run "User Management" Quickstart + +Once your database has started, head over to your project's `SQL Editor` and run the "User Management Starter" quickstart. On the `SQL editor` page, scroll down until you see `User Management Starter: Sets up a public Profiles table which you can access with your API`. Click that, then click `RUN` to execute that query and create a new `profiles` table. When that's finished, head over to the `Table Editor` and see your new `profiles` table. + +### 3. Get the URL and Key + +Go to the Project Settings (the cog icon), open the API tab, and find your API URL and `anon` key, you'll need these in the next step. + +The `anon` key is your client-side API key. It allows "anonymous access" to your database, until the user has logged in. Once they have logged in, the keys will switch to the user's own login token. This enables row level security for your data. Read more about this [below](#postgres-row-level-security). + +![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png) + +**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser. + +### 4. Env vars + +Create a file in this folder `.env.local` + +``` +VITE_SUPABASE_URL=YOUR_SUPABASE_URL +VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY +``` + +Populate this file with your URL and Key. + +### 5. Run the application + +Run the application: `npm run dev`. Open your browser to `https://localhost:5173/` and you are ready to go 🚀. + +## Supabase details + +### Postgres Row level security + +This project uses very high-level Authorization using Postgres' Role Level Security. +When you start a Postgres database on Supabase, we populate it with an `auth` schema, and some helper functions. +When a user logs in, they are issued a JWT with the role `authenticated` and their UUID. +We can use these details to provide fine-grained control over what each user can and cannot do. + +This is a trimmed-down schema, with the policies: + +```sql +-- Create a table for Public Profiles +create table profiles ( + id uuid references auth.users not null, + updated_at timestamp with time zone, + username text unique, + avatar_url text, + website text, + primary key (id), + unique(username), + constraint username_length check (char_length(username) >= 3) +); +alter table profiles enable row level security; +create policy "Public profiles are viewable by everyone." + on profiles for select + using ( true ); +create policy "Users can insert their own profile." + on profiles for insert + with check ( auth.uid() = id ); +create policy "Users can update own profile." + on profiles for update + using ( auth.uid() = id ); +-- Set up Realtime! +begin; + drop publication if exists supabase_realtime; + create publication supabase_realtime; +commit; +alter publication supabase_realtime add table profiles; +-- Set up Storage! +insert into storage.buckets (id, name) +values ('avatars', 'avatars'); +create policy "Avatar images are publicly accessible." + on storage.objects for select + using ( bucket_id = 'avatars' ); +create policy "Anyone can upload an avatar." + on storage.objects for insert + with check ( bucket_id = 'avatars' ); +``` + + + +## License + +MIT + diff --git a/examples/user-management/refine-user-management/index.html b/examples/user-management/refine-user-management/index.html new file mode 100644 index 00000000000..17e72529889 --- /dev/null +++ b/examples/user-management/refine-user-management/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + refine - Build your React-based CRUD applications, without constraints. + + + + +
+ + + + diff --git a/examples/user-management/refine-user-management/package.json b/examples/user-management/refine-user-management/package.json new file mode 100644 index 00000000000..f91969089ae --- /dev/null +++ b/examples/user-management/refine-user-management/package.json @@ -0,0 +1,50 @@ +{ + "name": "refine-user-management", + "version": "0.1.0", + "private": true, + "type": "module", + "dependencies": { + "@refinedev/cli": "^2.5.1", + "@refinedev/core": "^4.5.8", + "@refinedev/inferencer": "^3.1.4", + "@refinedev/kbar": "^1.1.0", + "@refinedev/react-hook-form": "^4.4.0", + "@refinedev/react-router-v6": "^4.1.0", + "@refinedev/supabase": "^5.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "react-hook-form": "^7.45.0", + "react-router-dom": "^6.8.1" + }, + "devDependencies": { + "@types/node": "^18.16.2", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", + "@typescript-eslint/eslint-plugin": "^5.57.1", + "@typescript-eslint/parser": "^5.57.1", + "@vitejs/plugin-react": "^4.0.0", + "eslint": "^8.38.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.3.4", + "typescript": "^4.7.4", + "vite": "^4.3.1" + }, + "scripts": { + "dev": "refine dev", + "build": "tsc && refine build", + "preview": "refine start", + "refine": "refine" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/examples/user-management/refine-user-management/public/favicon.ico b/examples/user-management/refine-user-management/public/favicon.ico new file mode 100644 index 00000000000..2f05c5f484f Binary files /dev/null and b/examples/user-management/refine-user-management/public/favicon.ico differ diff --git a/examples/user-management/refine-user-management/src/App.css b/examples/user-management/refine-user-management/src/App.css new file mode 100644 index 00000000000..c8af4ebcc94 --- /dev/null +++ b/examples/user-management/refine-user-management/src/App.css @@ -0,0 +1,382 @@ +html, +body { + --custom-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, + Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + --custom-bg-color: #101010; + --custom-panel-color: #222; + --custom-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.8); + --custom-color: #fff; + --custom-color-brand: #24b47e; + --custom-color-secondary: #666; + --custom-border: 1px solid #333; + --custom-border-radius: 5px; + --custom-spacing: 5px; + + padding: 0; + margin: 0; + font-family: var(--custom-font-family); + background-color: var(--custom-bg-color); +} + +* { + color: var(--custom-color); + font-family: var(--custom-font-family); + box-sizing: border-box; +} + +html, +body, +#__next { + height: 100vh; + width: 100vw; + overflow-x: hidden; +} + +/* Grid */ + +.container { + width: 90%; + margin-left: auto; + margin-right: auto; +} +.row { + position: relative; + width: 100%; +} +.row [class^='col'] { + float: left; + margin: 0.5rem 2%; + min-height: 0.125rem; +} +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-12 { + width: 96%; +} +.col-1-sm { + width: 4.33%; +} +.col-2-sm { + width: 12.66%; +} +.col-3-sm { + width: 21%; +} +.col-4-sm { + width: 29.33%; +} +.col-5-sm { + width: 37.66%; +} +.col-6-sm { + width: 46%; +} +.col-7-sm { + width: 54.33%; +} +.col-8-sm { + width: 62.66%; +} +.col-9-sm { + width: 71%; +} +.col-10-sm { + width: 79.33%; +} +.col-11-sm { + width: 87.66%; +} +.col-12-sm { + width: 96%; +} +.row::after { + content: ''; + display: table; + clear: both; +} +.hidden-sm { + display: none; +} + +@media only screen and (min-width: 33.75em) { + /* 540px */ + .container { + width: 80%; + } +} + +@media only screen and (min-width: 45em) { + /* 720px */ + .col-1 { + width: 4.33%; + } + .col-2 { + width: 12.66%; + } + .col-3 { + width: 21%; + } + .col-4 { + width: 29.33%; + } + .col-5 { + width: 37.66%; + } + .col-6 { + width: 46%; + } + .col-7 { + width: 54.33%; + } + .col-8 { + width: 62.66%; + } + .col-9 { + width: 71%; + } + .col-10 { + width: 79.33%; + } + .col-11 { + width: 87.66%; + } + .col-12 { + width: 96%; + } + .hidden-sm { + display: block; + } +} + +@media only screen and (min-width: 60em) { + /* 960px */ + .container { + width: 75%; + max-width: 60rem; + } +} + +/* Forms */ + +label { + display: block; + margin: 5px 0; + color: var(--custom-color-secondary); + font-size: 0.8rem; + text-transform: uppercase; +} + +input { + width: 100%; + border-radius: 5px; + border: var(--custom-border); + padding: 8px; + font-size: 0.9rem; + background-color: var(--custom-bg-color); + color: var(--custom-color); +} + +input[disabled] { + color: var(--custom-color-secondary); +} + +/* Utils */ + +.block { + display: block; + width: 100%; +} +.inline-block { + display: inline-block; + width: 100%; +} +.flex { + display: flex; +} +.flex.column { + flex-direction: column; +} +.flex.row { + flex-direction: row; +} +.flex.flex-1 { + flex: 1 1 0; +} +.flex-end { + justify-content: flex-end; +} +.flex-center { + justify-content: center; +} +.items-center { + align-items: center; +} +.text-sm { + font-size: 0.8rem; + font-weight: 300; +} +.text-right { + text-align: right; +} +.font-light { + font-weight: 300; +} +.opacity-half { + opacity: 50%; +} + +/* Button */ + +button, +.button { + color: var(--custom-color); + border: var(--custom-border); + background-color: var(--custom-bg-color); + display: inline-block; + text-align: center; + border-radius: var(--custom-border-radius); + padding: 0.5rem 1rem; + cursor: pointer; + text-align: center; + font-size: 0.9rem; + text-transform: uppercase; +} + +button.primary, +.button.primary { + background-color: var(--custom-color-brand); + border: 1px solid var(--custom-color-brand); +} + +/* Widgets */ + +.card { + width: 100%; + display: block; + border: var(--custom-border); + border-radius: var(--custom-border-radius); + padding: var(--custom-spacing); +} + +.avatar { + border-radius: var(--custom-border-radius); + overflow: hidden; + max-width: 100%; +} +.avatar.image { + object-fit: cover; +} +.avatar.no-image { + background-color: #333; + border: 1px solid rgb(200, 200, 200); + border-radius: 5px; +} + +.footer { + position: absolute; + max-width: 100%; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-flow: row; + border-top: var(--custom-border); + background-color: var(--custom-bg-color); +} +.footer div { + padding: var(--custom-spacing); + display: flex; + align-items: center; + width: 100%; +} +.footer div > img { + height: 20px; + margin-left: 10px; +} +.footer > div:first-child { + display: none; +} +.footer > div:nth-child(2) { + justify-content: left; +} + +@media only screen and (min-width: 60em) { + /* 960px */ + .footer > div:first-child { + display: flex; + } + .footer > div:nth-child(2) { + justify-content: center; + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.mainHeader { + width: 100%; + font-size: 1.3rem; + margin-bottom: 20px; +} + +.avatarPlaceholder { + border: var(--custom-border); + border-radius: var(--custom-border-radius); + width: 35px; + height: 35px; + background-color: rgba(255, 255, 255, 0.2); + display: flex; + align-items: center; + justify-content: center; +} + +.form-widget { + display: flex; + flex-direction: column; + gap: 20px; +} + +.form-widget > .button { + display: flex; + align-items: center; + justify-content: center; + border: none; + background-color: #444444; + text-transform: none !important; + transition: all 0.2s ease; +} + +.form-widget .button:hover { + background-color: #2a2a2a; +} + +.form-widget .button > .loader { + width: 17px; + animation: spin 1s linear infinite; + filter: invert(1); +} + +.visually-hidden:not(:focus):not(:active) { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} diff --git a/examples/user-management/refine-user-management/src/App.tsx b/examples/user-management/refine-user-management/src/App.tsx new file mode 100644 index 00000000000..98e42e2e346 --- /dev/null +++ b/examples/user-management/refine-user-management/src/App.tsx @@ -0,0 +1,58 @@ +import { Authenticated, Refine } from '@refinedev/core'; +import { RefineKbar, RefineKbarProvider } from '@refinedev/kbar'; + +import routerBindings, { + CatchAllNavigate, + DocumentTitleHandler, + UnsavedChangesNotifier, +} from '@refinedev/react-router-v6'; +import { dataProvider, liveProvider } from '@refinedev/supabase'; +import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom'; +import './App.css'; +import authProvider from './authProvider'; +import { supabaseClient } from './utility'; +import Account from './components/account'; +import Auth from './components/auth'; + +function App() { + return ( + + + + + } + > + + + } + > + } /> + + } />} + > + } /> + + + + + + + + + ); +} + +export default App; diff --git a/examples/user-management/refine-user-management/src/authProvider.ts b/examples/user-management/refine-user-management/src/authProvider.ts new file mode 100644 index 00000000000..d24fb768fc1 --- /dev/null +++ b/examples/user-management/refine-user-management/src/authProvider.ts @@ -0,0 +1,91 @@ +import { AuthBindings } from "@refinedev/core"; + +import { supabaseClient } from "./utility"; + +const authProvider: AuthBindings = { + login: async ({ email }) => { + try { + const { error } = await supabaseClient.auth.signInWithOtp({ email }); + + if (!error) { + alert("Check your email for the login link!"); + return { + success: true, + }; + }; + + throw error; + } catch (e: any) { + alert(e.message); + return { + success: false, + e, + }; + } + }, + logout: async () => { + const { error } = await supabaseClient.auth.signOut(); + + if (error) { + return { + success: false, + error, + }; + } + + return { + success: true, + redirectTo: "/", + }; + }, + onError: async (error) => { + console.error(error); + return { error }; + }, + check: async () => { + try { + const { data } = await supabaseClient.auth.getSession(); + const { session } = data; + + if (!session) { + return { + authenticated: false, + error: { + message: "Check failed", + name: "Session not found", + }, + logout: true, + redirectTo: "/login", + }; + } + } catch (error: any) { + return { + authenticated: false, + error: error || { + message: "Check failed", + name: "Not authenticated", + }, + logout: true, + redirectTo: "/login", + }; + } + + return { + authenticated: true, + }; + }, + getIdentity: async () => { + const { data } = await supabaseClient.auth.getUser(); + + if (data?.user) { + return { + ...data.user, + name: data.user.email, + }; + } + + return null; + }, +}; + +export default authProvider; diff --git a/examples/user-management/refine-user-management/src/components/account.tsx b/examples/user-management/refine-user-management/src/components/account.tsx new file mode 100644 index 00000000000..08292fa4714 --- /dev/null +++ b/examples/user-management/refine-user-management/src/components/account.tsx @@ -0,0 +1,107 @@ +import { BaseKey, useGetIdentity, useLogout } from "@refinedev/core"; +import { useForm } from "@refinedev/react-hook-form"; +import { Controller } from "react-hook-form"; +import Avatar from "./avatar"; + +interface IUserIdentity { + id?: BaseKey; + username: string; + name: string; +}; + +export interface IProfile { + id?: string; + username?: string; + website?: string; + avatar_url?: string; +}; + +export default function Account() { + const { data: userIdentity } = useGetIdentity(); + + const { mutate: logOut } = useLogout(); + + const { + refineCore: { formLoading, queryResult, onFinish }, + register, + control, + handleSubmit, + } = useForm({ + refineCoreProps: { + resource: "profiles", + action: "edit", + id: userIdentity?.id, + redirect: false, + onMutationError: (data) => alert(data?.message), + }, + }); + + return ( +
+
+ { + return ( + { + onFinish({ + ...queryResult?.data?.data, + avatar_url: filePath, + onMutationError: (data: { message: string; }) => alert(data?.message), + }); + field.onChange({ + target: { + value: filePath, + }, + }); + }} + /> + ); + }} + /> +
+ + +
+
+ + +
+
+ + +
+ +
+ +
+ +
+ +
+ +
+ ); +}; diff --git a/examples/user-management/refine-user-management/src/components/auth.tsx b/examples/user-management/refine-user-management/src/components/auth.tsx new file mode 100644 index 00000000000..1c043ffcb31 --- /dev/null +++ b/examples/user-management/refine-user-management/src/components/auth.tsx @@ -0,0 +1,38 @@ +import { useState } from "react"; +import { useLogin } from "@refinedev/core"; + +export default function Auth() { + const [email, setEmail] = useState(""); + const { isLoading, mutate: login } = useLogin(); + + const handleLogin = async (event: { preventDefault: () => void }) => { + event.preventDefault(); + login({ email }); + }; + + return ( +
+
+

Supabase + refine

+

Sign in via magic link with your email below

+
+
+ setEmail(e.target.value)} + /> +
+
+ +
+
+
+
+ ); +}; diff --git a/examples/user-management/refine-user-management/src/components/avatar.tsx b/examples/user-management/refine-user-management/src/components/avatar.tsx new file mode 100644 index 00000000000..0feb85b2982 --- /dev/null +++ b/examples/user-management/refine-user-management/src/components/avatar.tsx @@ -0,0 +1,99 @@ +import { useEffect, useState } from "react"; +import { supabaseClient } from "../utility/supabaseClient"; + +type TAvatarProps = { + url?: string; + size: number; + onUpload: (filePath: string) => void; +}; + +export default function Avatar({ + url, + size, + onUpload, +}: TAvatarProps) { + const [avatarUrl, setAvatarUrl] = useState(""); + const [uploading, setUploading] = useState(false); + + useEffect(() => { + if (url) downloadImage(url); + }, [url]); + + async function downloadImage(path: string) { + try { + const { data, error } = await supabaseClient.storage + .from("avatars") + .download(path); + if (error) { + throw error; + } + const url = URL.createObjectURL(data); + setAvatarUrl(url); + } catch (error: any) { + console.log("Error downloading image: ", error?.message); + } + } + + async function uploadAvatar(event: React.ChangeEvent) { + try { + setUploading(true); + + if (!event.target.files || event.target.files.length === 0) { + throw new Error("You must select an image to upload."); + } + + const file = event.target.files[0]; + const fileExt = file.name.split(".").pop(); + const fileName = `${Math.random()}.${fileExt}`; + const filePath = `${fileName}`; + + const { error: uploadError } = await supabaseClient.storage + .from("avatars") + .upload(filePath, file); + + if (uploadError) { + throw uploadError; + } + onUpload(filePath); + } catch (error: any) { + alert(error.message); + } finally { + setUploading(false); + } + } + + return ( +
+ {avatarUrl ? ( + Avatar + ) : ( +
+ )} +
+ + +
+
+ ); +}; diff --git a/examples/user-management/refine-user-management/src/index.tsx b/examples/user-management/refine-user-management/src/index.tsx new file mode 100644 index 00000000000..8d978ffc882 --- /dev/null +++ b/examples/user-management/refine-user-management/src/index.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import { createRoot } from "react-dom/client"; + +import App from "./App"; + +const container = document.getElementById("root") as HTMLElement; +const root = createRoot(container); + +root.render( + + + +); diff --git a/examples/user-management/refine-user-management/src/utility/index.ts b/examples/user-management/refine-user-management/src/utility/index.ts new file mode 100644 index 00000000000..1a21596513d --- /dev/null +++ b/examples/user-management/refine-user-management/src/utility/index.ts @@ -0,0 +1 @@ +export * from "./supabaseClient"; diff --git a/examples/user-management/refine-user-management/src/utility/supabaseClient.ts b/examples/user-management/refine-user-management/src/utility/supabaseClient.ts new file mode 100644 index 00000000000..d58cb40f1e4 --- /dev/null +++ b/examples/user-management/refine-user-management/src/utility/supabaseClient.ts @@ -0,0 +1,14 @@ +import { createClient } from "@refinedev/supabase"; + + +const supabaseUrl = import.meta.env.VITE_SUPABASE_URL; +const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY; + +export const supabaseClient = createClient(supabaseUrl, supabaseAnonKey, { + db: { + schema: "public", + }, + auth: { + persistSession: true, + }, +}); diff --git a/examples/user-management/refine-user-management/src/vite-env.d.ts b/examples/user-management/refine-user-management/src/vite-env.d.ts new file mode 100644 index 00000000000..11f02fe2a00 --- /dev/null +++ b/examples/user-management/refine-user-management/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/user-management/refine-user-management/tsconfig.json b/examples/user-management/refine-user-management/tsconfig.json new file mode 100644 index 00000000000..c132c6386c5 --- /dev/null +++ b/examples/user-management/refine-user-management/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src", "vite.config.ts"], + "references": [ + { + "path": "./tsconfig.node.json" + } + ] +} diff --git a/examples/user-management/refine-user-management/tsconfig.node.json b/examples/user-management/refine-user-management/tsconfig.node.json new file mode 100644 index 00000000000..bfa585014fc --- /dev/null +++ b/examples/user-management/refine-user-management/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "node" + }, + "include": ["vite.config.ts"] +} diff --git a/examples/user-management/refine-user-management/vite.config.ts b/examples/user-management/refine-user-management/vite.config.ts new file mode 100644 index 00000000000..58676f788a8 --- /dev/null +++ b/examples/user-management/refine-user-management/vite.config.ts @@ -0,0 +1,6 @@ +import react from "@vitejs/plugin-react"; +import { defineConfig } from "vite"; + +export default defineConfig({ + plugins: [react()], +});