{"id":22922426,"url":"https://github.com/aaronksaunders/tanstack-start-supabase-auth","last_synced_at":"2025-10-26T01:36:39.076Z","repository":{"id":268036856,"uuid":"901096587","full_name":"aaronksaunders/tanstack-start-supabase-auth","owner":"aaronksaunders","description":"This project is a basic authentication example using TanStack, Supabase, and TailwindCSS. It demonstrates how to implement user authentication, including login, signup, and session management, using Supabase as the backend service.","archived":false,"fork":false,"pushed_at":"2025-01-12T01:20:14.000Z","size":394,"stargazers_count":17,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T01:36:37.507Z","etag":null,"topics":["fullstack","javascript","reactjs","supabase","supabase-ssr","tanstack","tanstack-router","tanstack-start"],"latest_commit_sha":null,"homepage":"https://youtu.be/PbK9vTOt37A","language":"TypeScript","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/aaronksaunders.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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-10T03:18:24.000Z","updated_at":"2025-09-07T06:42:22.000Z","dependencies_parsed_at":"2024-12-14T00:25:56.871Z","dependency_job_id":"e84ed272-3c4b-490d-9b2e-b933f41ab5f0","html_url":"https://github.com/aaronksaunders/tanstack-start-supabase-auth","commit_stats":null,"previous_names":["aaronksaunders/tanstack-start-supabase-auth"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aaronksaunders/tanstack-start-supabase-auth","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ftanstack-start-supabase-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ftanstack-start-supabase-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ftanstack-start-supabase-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ftanstack-start-supabase-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/tanstack-start-supabase-auth/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ftanstack-start-supabase-auth/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281047794,"owners_count":26435124,"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-25T02:00:06.499Z","response_time":81,"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":["fullstack","javascript","reactjs","supabase","supabase-ssr","tanstack","tanstack-router","tanstack-start"],"created_at":"2024-12-14T08:10:07.913Z","updated_at":"2025-10-26T01:36:39.061Z","avatar_url":"https://github.com/aaronksaunders.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TanStack Start Example with Basic Auth\n\nThis project is a basic authentication example using TanStack, Supabase, and TailwindCSS. It\ndemonstrates how to implement user authentication, including login, signup, and session management,\nusing Supabase as the backend service.\n\n## Videos\n\n- YouTube Video About this Project -https://youtu.be/PbK9vTOt37A\n- See walkthrough of basic auth application flow here in this video - https://youtu.be/kpjU2nMbZdw\n- First video setting up basic Tanstack Start Application - https://youtu.be/oOqjZWpb-EI\n\n## Project Structure\n\n- `/app`: Contains the main application code\n  - `/components`: Reusable React components\n  - `/routes`: Route components and API handlers\n    - `/_authed`: Route Components for authenticated users\n  - `/styles`: CSS styles, including Tailwind configuration\n  - `/utils`: Utility functions and services\n  - `/public`: Static assets\n\n## Features\n\n- React-based frontend with TanStack Router for routing\n- Authentication - Login, Logout, Create Account\n- Protecting Pages for Authenticated Users\n- Saving Information In Session\n- Server-side rendering (SSR) support\n- API routes for backend functionality\n- Tailwind CSS for styling\n\n## Technologies Used\n\n- [TanStack Start](https://tanstack.com/start)\n- [TanStack Router](https://tanstack.com/router)\n- [Supabase](https://supabase.io/)\n- [React](https://reactjs.org/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Vite](https://vitejs.dev/)\n\n## Setup and Installation\n\n1. Clone the repository\n2. Install dependencies:\n   ```\n   npm install\n   ```\n3. Set up the environment variables: Create a `.env` file in the root of your project and add your\n   Supabase credentials:\n   ```\n   SUPABASE_URL=your_supabase_url\n   SUPABASE_ANON_KEY=your_supabase_anon_key\n   ```\n4. Start the development server:\n   ```\n   npm run dev\n   ```\n\n## Available Scripts\n\n- `npm run dev`: Start the development server\n- `npm run build`: Build the production-ready application\n- `npm run start`: Start the production server\n- `npm run format`: Format code using Prettier\n- `npm run lint`: Lint the codebase using ESLint\n- `npm run test`: Run the test suite\n\n## Development\n\nThis project uses Vite for fast development and building. The development server will rebuild assets\non file changes.\n\n## Routing\n\nRouting is handled by TanStack Router. Route components are located in the `/app/routes` directory.\nThe application includes protected routes that require authentication, ensuring that only logged-in\nusers can access certain pages.\n\n## Authentication\n\nThe application uses Supabase for user authentication. It supports user login, signup, and session\nmanagement. The authentication flow is handled through server functions that interact with\nSupabase's authentication API.\n\n- **Login**: Users can log in with their email and password. Upon successful login, they are\n  redirected to the home page.\n- **Signup**: New users can create an account by providing their email, password, first name, and\n  last name. After successful signup, they are redirected to the home page.\n- **Session Management**: The application maintains user sessions, allowing users to stay logged in\n  across page refreshes.\n\n## Styling\n\nTailwind CSS is used for styling. The main CSS file is located at `/app/styles/app.css`.\n\n## API Routes\n\nAPI routes are defined in the `/app/routes/api` directory. These routes handle server-side logic and\ndatabase operations.\n\n## Deployment and Production\n\nThis project uses Vinxi, a powerful meta-framework for building full-stack JavaScript applications.\nTo deploy the application:\n\n1. Build the project:\n\n   ```\n   npm run build\n   ```\n\n   This command uses Vinxi to build the application with the `node-server` preset, optimizing it for\n   server-side rendering with a Node.js backend.\n\n2. Start the production server:\n   ```\n   npm run start\n   ```\n   This command starts the Vinxi server in production mode, serving your built application.\n\n### Node.js Server\n\nThe built project runs on a Node.js server, which handles both serving the static assets and\nserver-side rendering (SSR) of your React application. This setup provides several benefits:\n\n- Improved initial page load times due to server-side rendering\n- Better SEO as search engines can crawl the fully rendered content\n- Seamless handling of both client-side and server-side routing\n\n### Supabase Information\n\n### Table\n\n```sql\ncreate table\n  public.things (\n    id bigint generated by default as identity,\n    created_at timestamp with time zone not null default now(),\n    title text null,\n    description text null,\n    file_name text null,\n    file_id text null,\n    file_path text null,\n    constraint things_pkey primary key (id)\n  ) tablespace pg_default;\n```\n\nPermissions\n\n```sql\nalter policy \"Enable all for authenticated users only\"\non \"public\".\"things\"\nto authenticated\nusing (\n  true\n);\n```\n\n### Bucket\n\n```sql\n-- Create the 'things' bucket\ninsert into storage.buckets (id, name, public)\nvalues ('things', 'things', false);\n\n-- Allow authenticated users to upload files\nalter policy \"Allow authenticated uploads\"\non storage.objects\nfor insert\nto authenticated\nwith check (\n  bucket_id = 'things' AND\n  auth.role() = 'authenticated'\n);\n\n-- Allow authenticated users to read files\nalter policy \"Allow authenticated downloads\"\non storage.objects\nfor select\nto authenticated\nusing (\n  bucket_id = 'things' AND\n  auth.role() = 'authenticated'\n);\n\n-- Enable RLS\nalter table storage.objects enable row level security;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Ftanstack-start-supabase-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Ftanstack-start-supabase-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Ftanstack-start-supabase-auth/lists"}