{"id":26942324,"url":"https://github.com/bastndev/astro-login-supabase","last_synced_at":"2025-04-02T16:41:20.282Z","repository":{"id":235050315,"uuid":"789626109","full_name":"bastndev/Astro-Login-Supabase","owner":"bastndev","description":"Astro login using React and Supabase ~ 🟠🔵🟢","archived":false,"fork":false,"pushed_at":"2024-04-23T23:58:08.000Z","size":985,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-01T22:38:14.775Z","etag":null,"topics":["astro-login","astro-react-login-supbase","login-supabase","supbase"],"latest_commit_sha":null,"homepage":"https://youtu.be/3GKo2tfAUXY","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bastndev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-04-21T04:55:16.000Z","updated_at":"2024-04-25T01:50:30.000Z","dependencies_parsed_at":"2024-04-23T05:10:02.543Z","dependency_job_id":"50f7de36-745a-4124-994a-191b14a5d0a1","html_url":"https://github.com/bastndev/Astro-Login-Supabase","commit_stats":null,"previous_names":["bastndev/astro-login-supabase"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastndev%2FAstro-Login-Supabase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastndev%2FAstro-Login-Supabase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastndev%2FAstro-Login-Supabase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastndev%2FAstro-Login-Supabase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bastndev","download_url":"https://codeload.github.com/bastndev/Astro-Login-Supabase/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246852699,"owners_count":20844453,"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":["astro-login","astro-react-login-supbase","login-supabase","supbase"],"created_at":"2025-04-02T16:41:19.685Z","updated_at":"2025-04-02T16:41:20.275Z","avatar_url":"https://github.com/bastndev.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Astro Auth + Supabase and React \n\n\u003cimg width=\"1424\" src=\"public/images/github/screenshot.jpg\"\u003e\n\n1. Download the project from `GitHub` and in the terminal type `npm install` \n```\nnpm install\n```\n\n2. create environment Variables `.env` important create private `.env.local` \n```sh\nSUPABASE_URL=YOUR_SUPABASE_URL\nSUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY\n```\n\n3. Create new project in [Supabase](https://supabase.com/dashboard/sign-in?returnTo=%2Fprojects)\n\u003e NOTE: replace YOUR_SUPABASE_URL and YOUR_SUPABASE_ANON_KEY in `.env`\n\n4. install supabase in terminal with your project \n```\nnpm install @supabase/supabase-js\n```\n4.1. Add this code in `src/env.d.ts`\n```sh\ninterface ImportMetaEnv {\n  readonly SUPABASE_URL: string\n  readonly SUPABASE_ANON_KEY: string\n}\n\ninterface ImportMeta {\n  readonly env: ImportMetaEnv\n}\n```\n\n5. Create new folder `/lib` in /src and file `supabase.ts` src/lib/supabase.ts\n```sh\nimport { createClient } from \"@supabase/supabase-js\";\n\nexport const supabase = createClient(\n  import.meta.env.SUPABASE_URL,\n  import.meta.env.SUPABASE_ANON_KEY,\n);\n```\n6. Create project in [google cloud](https://cloud.google.com/) and [github dev](https://github.com/bastndev)\n\n7. Code - Documentation [Astro.js](https://docs.astro.build/en/guides/backend/supabase/)\n\n8. add this is code in buttons for `login` and `exit`\n```\n  \u003cform action=\"/api/auth/login\" method=\"post\"\u003e\n\n  \u003cform action=\"/api/auth/logout\"\u003e\n```\n\n\u003e [!IMPORTANT]\n\u003e Add or change in: `astro.config.mjs` to (output: 'server',)\n\n9. Integrates `Name` and `Email`, `Picture`\n```\nconst name = data?.user?.user_metadata?.full_name; \nconst picture = data?.user?.user_metadata?.avatar_url;\n```\n\u003cdetails \u003e\n\u003csummary \u003eCode example: \u003c/summary\u003e\n\n```\nimport { Icons } from \"../components/Icons\";\nimport { supabase } from \"../lib/supabase\";\n\nconst { cookies, redirect } = Astro;\n\nconst accessToken = cookies.get(\"sb-access-token\");\nconst refreshToken = cookies.get(\"sb-refresh-token\");\n\nif (!accessToken || !refreshToken) {\n  return redirect(\"/login\");\n}\n\nconst { data, error } = await supabase.auth.setSession({\n  refresh_token: refreshToken.value,\n  access_token: accessToken.value,\n});\n\nif (error) {\n  cookies.delete(\"sb-access-token\", {\n    path: \"/\",\n  });\n  cookies.delete(\"sb-refresh-token\", {\n    path: \"/\",\n  });\n\n  return redirect(\"/login\");\n}\n\nconst email = data?.user?.email;\nconst name = data?.user?.user_metadata?.full_name; \nconst picture = data?.user?.user_metadata?.avatar_url;\n```\n\u003c/details\u003e\n\n\u003e [!TIP]\n\u003e Change in: `/pages/api/auth/logout.ts` return redirect(\"/signin\"); to `(\"/\")` or `(\"/login)`\n\n\u003cdetails \u003e\n\u003csummary \u003eAdd in: (pages/dashboard.astro) \u003c/summary\u003e\n\n```\nconst { cookies, redirect } = Astro\nconst accessToken = cookies.get('sb-access-token')\nconst refreshToken = cookies.get('sb-refresh-token')\n\nif (!accessToken \u0026\u0026 !refreshToken) {\n  return redirect('/login')\n}\n```\n\u003c/details\u003e\n\n\u003cdetails \u003e\n\u003csummary \u003eAdd in: (pages/login.astro) \u003c/summary\u003e\n\n```\nconst { cookies, redirect } = Astro\n\nconst accessToken = cookies.get('sb-access-token')\nconst refreshToken = cookies.get('sb-refresh-token')\n\nif (accessToken \u0026\u0026 refreshToken) {\n  return redirect('/dashboard')\n}\n```\n\u003c/details\u003e\n\n\n## Technology Used\n\n| Technology  | Purpose               | Link                                                 |\n|-------------|-----------------------|------------------------------------------------------|\n| Astro       | Astro Doc Supabase    | [Docs](https://docs.astro.build/en/getting-started/) |\n| TailwindCSS | Styling               | [Docs](https://tailwindcss.com/)                     |\n| React       | Library               | [Docs](https://react.dev/)                           |\n| Supabase    | Database/storage/auth | [Docs](https://supabase.com/)                        |\n| Google      | Google cloud          | [Docs](https://cloud.google.com/)                    |\n| GitHub      | Github Dev            | [Docs](https://github.com/bastndev)                  |\n\n[X/Twitter](https://twitter.com/bastndev) - [Linkedin](https://www.linkedin.com/in/bastndev/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbastndev%2Fastro-login-supabase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbastndev%2Fastro-login-supabase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbastndev%2Fastro-login-supabase/lists"}