{"id":22173519,"url":"https://github.com/jlumbroso/supabase-react-example","last_synced_at":"2025-10-12T01:15:56.432Z","repository":{"id":63372367,"uuid":"566986431","full_name":"jlumbroso/supabase-react-example","owner":"jlumbroso","description":"Template version of one of the Supabase React examples, that showcases user management. ⚙️👥👤👥⚙️","archived":false,"fork":false,"pushed_at":"2022-11-18T01:57:34.000Z","size":1245,"stargazers_count":17,"open_issues_count":0,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-12T01:15:54.913Z","etag":null,"topics":["database-as-a-service","github-template","supabase","user-management"],"latest_commit_sha":null,"homepage":"https://jlumbroso.github.io/supabase-react-example/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jlumbroso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-16T20:42:50.000Z","updated_at":"2025-10-04T15:40:58.000Z","dependencies_parsed_at":"2022-11-17T19:15:15.617Z","dependency_job_id":null,"html_url":"https://github.com/jlumbroso/supabase-react-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/jlumbroso/supabase-react-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlumbroso%2Fsupabase-react-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlumbroso%2Fsupabase-react-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlumbroso%2Fsupabase-react-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlumbroso%2Fsupabase-react-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jlumbroso","download_url":"https://codeload.github.com/jlumbroso/supabase-react-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlumbroso%2Fsupabase-react-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279009736,"owners_count":26084645,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["database-as-a-service","github-template","supabase","user-management"],"created_at":"2024-12-02T07:33:53.701Z","updated_at":"2025-10-12T01:15:56.385Z","avatar_url":"https://github.com/jlumbroso.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Supabase React User Management Template\n\nThis example will set you up for a very common situation: Users can sign up with a magic link and then update their account with public profile information, including a profile image.\n\nThis demonstrates how to use:\n\n- User signups using Supabase [Auth](https://supabase.com/auth).\n- User avatar images using Supabase [Storage](https://supabase.com/storage).\n- Public profiles restricted with [Policies](https://supabase.com/docs/guides/auth#policies).\n- Frontend using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).\n- Deployment using [GitHub Actions](https://docs.github.com/en/actions) + hosting using [GitHub Pages](https://pages.github.com/).\n\n_This example is originally [from the Supabase developers](https://github.com/supabase/supabase/tree/master/examples/user-management/react-user-management), and it was adapted by [**@jlumbroso**](https://github.com/jlumbroso) to be compiled through GitHub Actions and deployed to GitHub Pages, so that it could be made into a [GitHub Template](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository)._\n\n## Technologies used\n\n- Frontend:\n  - [Create React App](https://reactjs.org/docs/create-a-new-react-app.html) - a React toolchain.\n  - [Supabase.js](https://supabase.com/docs/library/getting-started) for user management and realtime data syncing.\n- Backend:\n  - [app.supabase.com](https://app.supabase.com/): hosted Postgres database with restful API for usage with Supabase.js.\n- Deployment:\n  - The code is compiled by [GitHub Actions](https://docs.github.com/en/actions) using the continuous integration in `.github/workflows`.\n  - The website is hosted on [GitHub Pages](https://pages.github.com/), in the version available in the branch `gh-pages`.\n\n## Fork your own copy of this project\n\n### 1. Create your own instance of the repository\n\nThe repository `jlumbroso/supabase-react-example` is a template, and you can [create your own repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template) from it.\n\nNote that the initial repository will contain this project, _but because the secrets are not configured yet, the deployment will either fail outright, or result in a broken website_. This is to be expected and will be resolved in the following steps.\n\n### 2. Create a new Supabase project\n\nSign up to Supabase - [https://app.supabase.com](https://app.supabase.com) and create a new project. Wait for your database to start.\n\n### 3. Run \"User Management\" Quickstart\n\nOnce 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.\n\n### 4. Get the URL and Key\n\nGo 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.\n\nThe `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).\n\n![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)\n\n**_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.\n\n### 5. Configure the secrets (and environment variables)\n\nIn the previous steps, you created a Supabase project with a database, and you created a `profiles` table. You also got the URL and key for your project. These are now going to be provided as configuration to the project.\n\nFor cloud deployment: Create [encrypted secrets for your repository](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository), using the following names:\n\n- `REACT_APP_SUPABASE_URL` for the URL of your project.\n- `REACT_APP_SUPABASE_ANON_KEY` for the `anon` key of your project.\n\n### 6. Turn on GitHub Pages\n\nIn the repository settings, go to the `Pages` section, and [select the `gh-pages` branch as the source for the GitHub Pages website](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-from-a-branch). This will be the branch where the compiled code will be deployed.\n\n### 7. Trigger the first deployment\n\nNow that the secrets are configured, the first deployment will be triggered. This will take a few minutes, and you can check the progress in the `Actions` tab of the repository.\n\n## Local development\n\nIf you ever want to locally develop this project, you can do so by following these steps.\n\n### 1. Clone the repository\n\n```bash\ngit clone https://github.com/\u003cyour username\u003e/\u003cyour repository name\u003e\n```\n\n### 2. Create the `.env` file\n\nInside the cloned repository, create a file `.env.local` with the following:\n\n```\nREACT_APP_SUPABASE_URL=\nREACT_APP_SUPABASE_ANON_KEY=\n```\n\nwhere you complete the values with the URL and key of your project.\n\n### 3. Install the dependencies of the project\n\nThis step will require that you have [some recent version of Node.js locally installed](https://nodejs.org/en/).\n\n```bash\nnpm install\n```\n\n### 4. Run the project\n\n```bash\nnpm run start\n```\n\nthen open your browser to `https://localhost:3000/` and you are ready to go 🚀.\n\n## Supabase details\n\n### Postgres Row level security\n\nThis project uses very high-level Authorization using Postgres' Role Level Security.\nWhen you start a Postgres database on Supabase, we populate it with an `auth` schema, and some helper functions.\nWhen a user logs in, they are issued a JWT with the role `authenticated` and their UUID.\nWe can use these details to provide fine-grained control over what each user can and cannot do.\n\nThis is a trimmed-down schema, with the policies:\n\n```sql\n-- Create a table for Public Profiles\ncreate table profiles (\n  id uuid references auth.users not null,\n  updated_at timestamp with time zone,\n  username text unique,\n  avatar_url text,\n  website text,\n  primary key (id),\n  unique(username),\n  constraint username_length check (char_length(username) \u003e= 3)\n);\nalter table profiles enable row level security;\ncreate policy \"Public profiles are viewable by everyone.\"\n  on profiles for select\n  using ( true );\ncreate policy \"Users can insert their own profile.\"\n  on profiles for insert\n  with check ( auth.uid() = id );\ncreate policy \"Users can update own profile.\"\n  on profiles for update\n  using ( auth.uid() = id );\n-- Set up Realtime!\nbegin;\n  drop publication if exists supabase_realtime;\n  create publication supabase_realtime;\ncommit;\nalter publication supabase_realtime add table profiles;\n-- Set up Storage!\ninsert into storage.buckets (id, name)\nvalues ('avatars', 'avatars');\ncreate policy \"Avatar images are publicly accessible.\"\n  on storage.objects for select\n  using ( bucket_id = 'avatars' );\ncreate policy \"Anyone can upload an avatar.\"\n  on storage.objects for insert\n  with check ( bucket_id = 'avatars' );\n```\n\n## Authors\n\n- [Supabase](https://supabase.com)\n- [@jlumbroso](https://www.github.com/jlumbroso)\n\nSupabase is open source. We'd love for you to follow along and get involved at https://github.com/supabase/supabase\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlumbroso%2Fsupabase-react-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjlumbroso%2Fsupabase-react-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlumbroso%2Fsupabase-react-example/lists"}