{"id":13618051,"url":"https://github.com/marmelab/ra-supabase","last_synced_at":"2025-05-15T15:05:31.772Z","repository":{"id":42452662,"uuid":"378190477","full_name":"marmelab/ra-supabase","owner":"marmelab","description":"Supabase adapter for react-admin, the frontend framework for building admin applications on top of REST/GraphQL services.","archived":false,"fork":false,"pushed_at":"2025-04-14T08:53:07.000Z","size":4560,"stargazers_count":182,"open_issues_count":4,"forks_count":33,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-08T18:11:25.298Z","etag":null,"topics":["api","react-admin","reactjs","rest","supabase"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marmelab.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-06-18T15:19:50.000Z","updated_at":"2025-05-04T18:41:06.000Z","dependencies_parsed_at":"2023-02-08T07:01:41.994Z","dependency_job_id":"f0241646-07db-45ff-b0a5-ab547bb3470b","html_url":"https://github.com/marmelab/ra-supabase","commit_stats":{"total_commits":275,"total_committers":25,"mean_commits":11.0,"dds":0.6472727272727272,"last_synced_commit":"4a14c1d23c1001c79a5b7afae5e69fc4034bc9a3"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fra-supabase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fra-supabase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fra-supabase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fra-supabase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marmelab","download_url":"https://codeload.github.com/marmelab/ra-supabase/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253379392,"owners_count":21899250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","react-admin","reactjs","rest","supabase"],"created_at":"2024-08-01T20:01:53.418Z","updated_at":"2025-05-15T15:05:31.754Z","avatar_url":"https://github.com/marmelab.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# ra-supabase\n\nThis package provides a dataProvider, an authProvider, hooks and components to integrate [Supabase](https://supabase.io/) with [react-admin](https://marmelab.com/react-admin) when using its default UI ([ra-ui-materialui](https://github.com/marmelab/react-admin/tree/master/packages/ra-ui-materialui)).\n\n[![Video]][VideoLink] \n[![Documentation]][DocumentationLink] \n[![Source Code]][SourceCodeLink] \n\n[Video]: https://img.shields.io/badge/Video-darkmagenta?style=for-the-badge\n[Documentation]: https://img.shields.io/badge/Documentation-darkgreen?style=for-the-badge\n[Source Code]: https://img.shields.io/badge/Source_Code-blue?style=for-the-badge\n\n[VideoLink]: https://youtu.be/zV-Ty7VeIvo 'Video'\n[DocumentationLink]: ./packages/ra-supabase/README.md 'Documentation'\n[SourceCodeLink]: https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase 'Source Code'\n\n[![Video tutorial about react-admin with supabase](./assets/video.jpg)](https://youtu.be/zV-Ty7VeIvo)\n\n## Projects\n\n- [ra-supabase](https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase): Umbrella project that re-export the others.\n- [ra-supabase-core](https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase-core): Provide the dataProvider, authProvider and some hooks\n- [ra-supabase-ui-materialui](https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase-ui-materialui): Provide the LoginPage and Social authentication buttons\n- [ra-supabase-language-english](https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase-language-english): Provide the english translations\n- [ra-supabase-language-french](https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase-language-french): Provide the french translations\n\n## Roadmap\n\n-   Add support for magic link authentication\n-   Add support for uploading files to Supabase storage\n\n## Local Development\n\nThis project uses a [local instance of Supabase](https://supabase.com/docs/guides/cli/local-development). To set up your environment, run the following command:\n\n```sh\nmake install supabase-start db-setup\n```\n\nThis will:\n- install dependencies\n- initialize an `.env` file with environment variables to target the supabase instance\n- start the supabase instance\n- apply the database migration\n- seed the database with data\n\nYou can then start the application in `development` mode with:\n\n```sh\nmake run\n```\n\nLog in with the following credentials:\n\n- Email: `janedoe@atomic.dev`\n- Password: `password`\n\nIf you need debug the backend, you can access the following services: \n\n- Supabase dashboard: [http://localhost:54323/](http://localhost:54323/)\n- REST API: [http://127.0.0.1:54321](http://127.0.0.1:54321)\n- Attachments storage: [http://localhost:54323/project/default/storage/buckets/attachments](http://localhost:54323/project/default/storage/buckets/attachments)\n- Inbucket email testing service: [http://localhost:54324/](http://localhost:54324/)\n\n### Testing Invitations And Password Reset\n\nWhen you invite a new user through the [Authentication dashboard](http://localhost:54323/project/default/auth/users), or reset a password through the [password reset form](http://localhost:8000/forgot-password), you can see the email sent in [Inbucket](http://localhost:54324/monitor).\n\nClicking the link inside the email will take you to the `/set-password` page where you can set or reset your password.\n\n### Testing Third Party Authentication Providers\n\nTo test OAuth providers, you must configure the Supabase local instance. This is done by editing the `./supabase/config.toml` file as described in the [Supabase CLi documentation](https://supabase.com/docs/reference/cli/config#auth.external.provider.enabled).\n\nFor instance, to add support for Github authentication, you have to:\n\n1. Create a GitHub Oauth App\n\nGo to the GitHub Developer Settings page:\n- Click on your profile picture at the top right\n- Click Settings near the bottom of the menu\n- In the left sidebar, click Developer settings (near the bottom)\n- In the left sidebar, click OAuth Apps\n- Click Register a new application. If you've created an app before, click New OAuth App here.\n- In Application name, type the name of your app.\n- In Homepage URL, type the full URL to your app's website: `http://localhost:8000`\n- In Authorization callback URL, type the callback URL of your app: `http://localhost:54321/auth/v1/callback`\n- Click Save Changes at the bottom right.\n- Click Register Application\n- Copy and save your Client ID.\n- Click Generate a new client secret.\n- Copy and save your Client secret\n\n2. Update the `./supabase/config` file\n\n```toml\n[auth.external.github]\nenabled = true\nclient_id = \"YOUR_GITHUB_CLIENT_ID\"\nsecret = \"YOUR_GITHUB_CLIENT_SECRET\"\n```\n\n3. Restart the supabase instance\n\n```sh\nmake supabase-stop supabase-start db-setup\n```\n\n4. Update the demo login page configuration:\n\nOpen the `./packages/demo/src/App.tsx` file and update it.\n\n```diff\n\u003cAdmin\n    dataProvider={dataProvider}\n    authProvider={authProvider}\n    i18nProvider={i18nProvider}\n    layout={Layout}\n    dashboard={Dashboard}\n-    loginPage={LoginPage}\n+    loginPage={\u003cLoginPage providers={['github']} /\u003e}\n    queryClient={queryClient}\n    theme={{\n        ...defaultTheme,\n        palette: {\n            background: {\n                default: '#fafafb',\n            },\n        },\n    }}\n\u003e\n```\n\n## Internationalization Support\n\nWe provide two language packages:\n\n-   [ra-supabase-language-english](https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase-language-english)\n-   [ra-supabase-language-french](https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase-language-french)\n\nAnd there are also community supported language packages:\n-   [ra-supabase-language-spanish](https://github.com/dreinon/ra-supabase-language-spanish)\n\n`ra-supabase` already re-export `ra-supabase-language-english` but you must set up the i18nProvider yourself:\n\n```js\n// in i18nProvider.js\nimport { mergeTranslations } from 'ra-core';\nimport polyglotI18nProvider from 'ra-i18n-polyglot';\nimport englishMessages from 'ra-language-english';\nimport frenchMessages from 'ra-language-french';\nimport { raSupabaseEnglishMessages } from 'ra-supabase-language-english';\nimport { raSupabaseFrenchMessages } from 'ra-supabase-language-french';\n\nconst allEnglishMessages = mergeTranslations(\n    englishMessages,\n    raSupabaseEnglishMessages\n);\nconst allFrenchMessages = mergeTranslations(\n    frenchMessages,\n    raSupabaseFrenchMessages\n);\n\nexport const i18nProvider = polyglotI18nProvider(\n    locale =\u003e (locale === 'fr' ? allFrenchMessages : allEnglishMessages),\n    'en'\n);\n\n// in App.js\nimport { Admin, Resource, ListGuesser } from 'react-admin';\nimport { authRoutes } from 'ra-supabase';\nimport { dataProvider } from './dataProvider';\nimport { authProvider } from './authProvider';\nimport { i18nProvider } from './i18nProvider';\n\nexport const MyAdmin = () =\u003e (\n    \u003cAdmin\n        dataProvider={dataProvider}\n        authProvider={authProvider}\n        i18nProvider={i18nProvider}\n        customRoutes={authRoutes}\n    \u003e\n        \u003cResource name=\"posts\" list={ListGuesser} /\u003e\n        \u003cResource name=\"authors\" list={ListGuesser} /\u003e\n    \u003c/Admin\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarmelab%2Fra-supabase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarmelab%2Fra-supabase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarmelab%2Fra-supabase/lists"}