mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Merge pull request #15531 from necatiozmen/docs-refine-tutorial
docs(framework-tutorials): add refine tutorials to the docs
This commit is contained in:
30 files changed
+2026
No files matched your search
@@ -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 (
|
||||
<div className="grid md:grid-cols-12 gap-4 not-prose">
|
||||
|
||||
@@ -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 = () => (
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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 = [
|
||||
|
||||
@@ -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',
|
||||
}
|
||||
|
||||
<StepHikeCompact>
|
||||
|
||||
<StepHikeCompact.Step step={1}>
|
||||
<StepHikeCompact.Details title="Set up a Supabase project with sample data">
|
||||
|
||||
[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.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```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');
|
||||
````
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={2}>
|
||||
|
||||
<StepHikeCompact.Details title="Create a refine app">
|
||||
|
||||
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).
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```bash Terminal
|
||||
npm create refine-app@latest -- --preset refine-supabase my-app
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={3}>
|
||||
<StepHikeCompact.Details title="Open your refine app in VS Code">
|
||||
|
||||
You will develop your app, connect to the Supabase backend and run the refine app in VS Code.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```bash Terminal
|
||||
cd my-app
|
||||
code .
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={4}>
|
||||
<StepHikeCompact.Details title="Start the app">
|
||||
|
||||
Start the app, go to http://localhost:5173 in a browser, and you should be greeted with the refine Welcome page.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```bash Terminal
|
||||
npm run dev
|
||||
```
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={5}>
|
||||
<StepHikeCompact.Details title="Update `supabaseClient`">
|
||||
|
||||
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.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```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,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={6}>
|
||||
<StepHikeCompact.Details title="Add countries resource and pages">
|
||||
|
||||
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 `<HeadlessInferencer />` component.
|
||||
|
||||
The `<HeadlessInferencer />` 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`.
|
||||
|
||||
<Admonition type="note">
|
||||
The `<HeadlessInferencer />` 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/).
|
||||
</Admonition>
|
||||
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```bash Terminal
|
||||
npm run refine create-resource countries
|
||||
```
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={7}>
|
||||
<StepHikeCompact.Details title="Add routes for countries pages">
|
||||
|
||||
Add routes for the `list`, `create`, `show`, and `edit` pages.
|
||||
|
||||
<Admonition type="important">
|
||||
You should remove the `index` route for the Welcome page presented with the `<Welcome />` component.
|
||||
</Admonition>
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
```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 (
|
||||
<BrowserRouter>
|
||||
<RefineKbarProvider>
|
||||
<Refine
|
||||
dataProvider={dataProvider(supabaseClient)}
|
||||
liveProvider={liveProvider(supabaseClient)}
|
||||
authProvider={authProvider}
|
||||
routerProvider={routerBindings}
|
||||
options={{
|
||||
syncWithLocation: true,
|
||||
warnWhenUnsavedChanges: true,
|
||||
}}
|
||||
resources={[{
|
||||
name: "countries",
|
||||
list: "/countries",
|
||||
create: "/countries/create",
|
||||
edit: "/countries/edit/:id",
|
||||
show: "/countries/show/:id"
|
||||
}]}>
|
||||
<Routes>
|
||||
<Route index
|
||||
element={<NavigateToResource resource="countries" />}
|
||||
/>
|
||||
<Route path="/countries">
|
||||
<Route index element={<CountriesList />} />
|
||||
<Route path="create" element={<CountriesCreate />} />
|
||||
<Route path="edit/:id" element={<CountriesEdit />} />
|
||||
<Route path="show/:id" element={<CountriesShow />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
<RefineKbar />
|
||||
<UnsavedChangesNotifier />
|
||||
<DocumentTitleHandler />
|
||||
</Refine>
|
||||
</RefineKbarProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={8}>
|
||||
<StepHikeCompact.Details title="View countries pages">
|
||||
|
||||
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.
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
</StepHikeCompact>
|
||||
|
||||
export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
|
||||
|
||||
export default Page
|
||||
@@ -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.',
|
||||
}
|
||||
|
||||
<QuickstartIntro />
|
||||
|
||||
|
||||
|
||||
<Admonition type="note">
|
||||
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).
|
||||
</Admonition>
|
||||
|
||||
## 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`.
|
||||
|
||||
<Admonition type="note">
|
||||
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.
|
||||
</Admonition>
|
||||
|
||||
<ProjectSetup />
|
||||
|
||||
## 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 `<Refine />` component inside `App.tsx`.
|
||||
|
||||
### The `<Refine />` 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 (
|
||||
<BrowserRouter>
|
||||
<RefineKbarProvider>
|
||||
<Refine
|
||||
dataProvider={dataProvider(supabaseClient)}
|
||||
liveProvider={liveProvider(supabaseClient)}
|
||||
authProvider={authProvider}
|
||||
routerProvider={routerBindings}
|
||||
options={{
|
||||
syncWithLocation: true,
|
||||
warnWhenUnsavedChanges: true,
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route index element={<WelcomePage />} />
|
||||
</Routes>
|
||||
<RefineKbar />
|
||||
<UnsavedChangesNotifier />
|
||||
<DocumentTitleHandler />
|
||||
</Refine>
|
||||
</RefineKbarProvider>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
```
|
||||
|
||||
We'd like to focus on the [`<Refine />`](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 (
|
||||
<div className="row flex flex-center container">
|
||||
<div className="col-6 form-widget">
|
||||
<h1 className="header">Supabase + refine</h1>
|
||||
<p className="description">Sign in via magic link with your email below</p>
|
||||
<form className="form-widget" onSubmit={handleLogin}>
|
||||
<div>
|
||||
<input
|
||||
className="inputField"
|
||||
type="email"
|
||||
placeholder="Your email"
|
||||
value={email}
|
||||
required={true}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button className={'button block'} disabled={isLoading}>
|
||||
{isLoading ? <span>Loading</span> : <span>Send magic link</span>}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
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<IUserIdentity>()
|
||||
|
||||
const { mutate: logOut } = useLogout()
|
||||
|
||||
const {
|
||||
refineCore: { formLoading, queryResult, onFinish },
|
||||
register,
|
||||
control,
|
||||
handleSubmit,
|
||||
} = useForm<IProfile>({
|
||||
refineCoreProps: {
|
||||
resource: 'profiles',
|
||||
action: 'edit',
|
||||
id: userIdentity?.id,
|
||||
redirect: false,
|
||||
onMutationError: (data) => alert(data?.message),
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="container" style={{ padding: '50px 0 100px 0' }}>
|
||||
<form onSubmit={handleSubmit(onFinish)} className="form-widget">
|
||||
<div>
|
||||
<label htmlFor="email">Email</label>
|
||||
<input id="email" name="email" type="text" value={userIdentity?.name} disabled />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="username">Name</label>
|
||||
<input id="username" type="text" {...register('username')} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="website">Website</label>
|
||||
<input id="website" type="url" {...register('website')} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button className="button block primary" type="submit" disabled={formLoading}>
|
||||
{formLoading ? 'Loading ...' : 'Update'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button className="button block" type="button" onClick={() => logOut()}>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
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 `<Auth />` component and the routes for `index` path with the `<Account />` 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 (
|
||||
<BrowserRouter>
|
||||
<RefineKbarProvider>
|
||||
<Refine
|
||||
dataProvider={dataProvider(supabaseClient)}
|
||||
liveProvider={liveProvider(supabaseClient)}
|
||||
authProvider={authProvider}
|
||||
routerProvider={routerBindings}
|
||||
options={{
|
||||
syncWithLocation: true,
|
||||
warnWhenUnsavedChanges: true,
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route
|
||||
element={
|
||||
<Authenticated fallback={<CatchAllNavigate to="/login" />}>
|
||||
<Outlet />
|
||||
</Authenticated>
|
||||
}
|
||||
>
|
||||
<Route index element={<Account />} />
|
||||
</Route>
|
||||
<Route element={<Authenticated fallback={<Outlet />} />}>
|
||||
<Route path="/login" element={<Auth />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
<RefineKbar />
|
||||
<UnsavedChangesNotifier />
|
||||
<DocumentTitleHandler />
|
||||
</Refine>
|
||||
</RefineKbarProvider>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
## 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<HTMLInputElement>) {
|
||||
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 (
|
||||
<div>
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt="Avatar"
|
||||
className="avatar image"
|
||||
style={{ height: size, width: size }}
|
||||
/>
|
||||
) : (
|
||||
<div className="avatar no-image" style={{ height: size, width: size }} />
|
||||
)}
|
||||
<div style={{ width: size }}>
|
||||
<label className="button primary block" htmlFor="single">
|
||||
{uploading ? 'Uploading ...' : 'Upload'}
|
||||
</label>
|
||||
<input
|
||||
style={{
|
||||
visibility: 'hidden',
|
||||
position: 'absolute',
|
||||
}}
|
||||
type="file"
|
||||
id="single"
|
||||
name="avatar_url"
|
||||
accept="image/*"
|
||||
onChange={uploadAvatar}
|
||||
disabled={uploading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### 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 (
|
||||
<div className="container" style={{ padding: '50px 0 100px 0' }}>
|
||||
<form onSubmit={handleSubmit} className="form-widget">
|
||||
<Controller
|
||||
control={control}
|
||||
name="avatar_url"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<Avatar
|
||||
url={field.value}
|
||||
size={150}
|
||||
onUpload={(filePath) => {
|
||||
onFinish({
|
||||
...queryResult?.data?.data,
|
||||
avatar_url: filePath,
|
||||
onMutationError: (data: { message: string }) => alert(data?.message),
|
||||
})
|
||||
field.onChange({
|
||||
target: {
|
||||
value: filePath,
|
||||
},
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
{/* ... */}
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
```
|
||||
|
||||
### Storage management
|
||||
|
||||
<StorageManagement />
|
||||
|
||||
At this stage, you have a fully functional application!
|
||||
|
||||
export const Page = ({ children }) => <Layout meta={meta} children={children} />
|
||||
|
||||
export default Page
|
||||
@@ -0,0 +1,12 @@
|
||||
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1617_18224)">
|
||||
<circle cx="64" cy="64" r="64" fill="#14141F"/>
|
||||
<path d="M72.2126 42.443C72.2126 46.7651 68.6722 50.2688 64.3049 50.2688C59.9375 50.2688 56.3971 46.7651 56.3971 42.443C56.3971 38.121 59.9375 34.6173 64.3049 34.6173C68.6722 34.6173 72.2126 38.121 72.2126 42.443Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M53.821 32.3072C56.6017 29.5543 60.3723 28.0053 64.3055 28C68.2388 28.0053 72.0094 29.5543 74.7901 32.3072C77.5709 35.0601 79.1348 38.7921 79.1389 42.6846V85.3204C79.1389 89.2137 77.5761 92.9475 74.7943 95.7004C72.0125 98.4534 68.2396 100 64.3055 100C60.3715 100 56.5986 98.4534 53.8168 95.7004C51.035 92.9475 49.4722 89.2137 49.4722 85.3204V42.6846C49.4762 38.7921 51.0402 35.0601 53.821 32.3072ZM71.6548 35.4115C69.7057 33.4825 67.062 32.3989 64.3055 32.3989C62.9406 32.3989 61.5891 32.6649 60.3282 33.1818C59.0672 33.6987 57.9214 34.4564 56.9563 35.4115C55.9912 36.3666 55.2256 37.5005 54.7033 38.7484C54.1809 39.9963 53.9121 41.3338 53.9121 42.6846V85.3204C53.9121 88.0484 55.0071 90.6646 56.9563 92.5935C58.9054 94.5225 61.549 95.6061 64.3055 95.6061C67.062 95.6061 69.7057 94.5225 71.6548 92.5935C73.604 90.6646 74.699 88.0484 74.699 85.3204V42.6846C74.699 39.9566 73.604 37.3404 71.6548 35.4115Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1617_18224">
|
||||
<rect width="128" height="128" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -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",
|
||||
},
|
||||
};
|
||||
@@ -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*
|
||||
@@ -0,0 +1,2 @@
|
||||
legacy-peer-deps=true
|
||||
strict-peer-dependencies=false
|
||||
@@ -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).
|
||||
|
||||
|
||||
|
||||
**_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
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="refine | Build your React-based CRUD applications, without constraints."
|
||||
/>
|
||||
<meta
|
||||
data-rh="true"
|
||||
property="og:image"
|
||||
content="https://refine.dev/img/refine_social_new.png"
|
||||
/>
|
||||
<meta
|
||||
data-rh="true"
|
||||
name="twitter:image"
|
||||
content="https://refine.dev/img/refine_social_new.png"
|
||||
/>
|
||||
<title>
|
||||
refine - Build your React-based CRUD applications, without constraints.
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm dev` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
@@ -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;
|
||||
}
|
||||
@@ -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 (
|
||||
<BrowserRouter>
|
||||
<RefineKbarProvider>
|
||||
<Refine
|
||||
dataProvider={dataProvider(supabaseClient)}
|
||||
liveProvider={liveProvider(supabaseClient)}
|
||||
authProvider={authProvider}
|
||||
routerProvider={routerBindings}
|
||||
options={{
|
||||
syncWithLocation: true,
|
||||
warnWhenUnsavedChanges: true,
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route
|
||||
element={
|
||||
<Authenticated
|
||||
fallback={<CatchAllNavigate to="/login" />}
|
||||
>
|
||||
<Outlet />
|
||||
</Authenticated>
|
||||
}
|
||||
>
|
||||
<Route index element={<Account />} />
|
||||
</Route>
|
||||
<Route
|
||||
element={<Authenticated fallback={<Outlet />} />}
|
||||
>
|
||||
<Route path="/login" element={<Auth />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
<RefineKbar />
|
||||
<UnsavedChangesNotifier />
|
||||
<DocumentTitleHandler />
|
||||
</Refine>
|
||||
</RefineKbarProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -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;
|
||||
@@ -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<IUserIdentity>();
|
||||
|
||||
const { mutate: logOut } = useLogout();
|
||||
|
||||
const {
|
||||
refineCore: { formLoading, queryResult, onFinish },
|
||||
register,
|
||||
control,
|
||||
handleSubmit,
|
||||
} = useForm<IProfile>({
|
||||
refineCoreProps: {
|
||||
resource: "profiles",
|
||||
action: "edit",
|
||||
id: userIdentity?.id,
|
||||
redirect: false,
|
||||
onMutationError: (data) => alert(data?.message),
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="container" style={{ padding: "50px 0 100px 0" }}>
|
||||
<form onSubmit={handleSubmit(onFinish)} className="form-widget">
|
||||
<Controller
|
||||
control={control}
|
||||
name="avatar_url"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<Avatar
|
||||
url={field.value}
|
||||
size={150}
|
||||
onUpload={(filePath) => {
|
||||
onFinish({
|
||||
...queryResult?.data?.data,
|
||||
avatar_url: filePath,
|
||||
onMutationError: (data: { message: string; }) => alert(data?.message),
|
||||
});
|
||||
field.onChange({
|
||||
target: {
|
||||
value: filePath,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<label htmlFor="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="text"
|
||||
value={userIdentity?.name}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="username">Name</label>
|
||||
<input id="username" type="text" {...register("username")} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="website">Website</label>
|
||||
<input id="website" type="url" {...register("website")} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
className="button block primary"
|
||||
type="submit"
|
||||
disabled={formLoading}
|
||||
>
|
||||
{formLoading ? "Loading ..." : "Update"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
className="button block"
|
||||
type="button"
|
||||
onClick={() => logOut()}
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -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 (
|
||||
<div className="row flex flex-center container">
|
||||
<div className="col-6 form-widget">
|
||||
<h1 className="header">Supabase + refine</h1>
|
||||
<p className="description">Sign in via magic link with your email below</p>
|
||||
<form className="form-widget" onSubmit={handleLogin}>
|
||||
<div>
|
||||
<input
|
||||
className="inputField"
|
||||
type="email"
|
||||
placeholder="Your email"
|
||||
value={email}
|
||||
required={true}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button className={"button block"} disabled={isLoading}>
|
||||
{isLoading ? <span>Loading</span> : <span>Send magic link</span>}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -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<HTMLInputElement>) {
|
||||
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 (
|
||||
<div>
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt="Avatar"
|
||||
className="avatar image"
|
||||
style={{ height: size, width: size }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="avatar no-image"
|
||||
style={{ height: size, width: size }}
|
||||
/>
|
||||
)}
|
||||
<div style={{ width: size }}>
|
||||
<label className="button primary block" htmlFor="single">
|
||||
{uploading ? "Uploading ..." : "Upload"}
|
||||
</label>
|
||||
<input
|
||||
style={{
|
||||
visibility: "hidden",
|
||||
position: "absolute",
|
||||
}}
|
||||
type="file"
|
||||
id="single"
|
||||
name="avatar_url"
|
||||
accept="image/*"
|
||||
onChange={uploadAvatar}
|
||||
disabled={uploading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -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(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./supabaseClient";
|
||||
@@ -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,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node"
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
});
|
||||
Reference in new issue
Block a user