Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aaronksaunders/tanstack-start-supabase-auth

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.
https://github.com/aaronksaunders/tanstack-start-supabase-auth

fullstack javascript reactjs supabase supabase-ssr tanstack tanstack-router tanstack-start

Last synced: 5 days ago
JSON representation

Host: GitHub
URL: https://github.com/aaronksaunders/tanstack-start-supabase-auth
Owner: aaronksaunders
Created: 2024-12-10T03:18:24.000Z (2 months ago)
Default Branch: main
Last Pushed: 2025-01-06T23:51:34.000Z (about 1 month ago)
Last Synced: 2025-01-07T00:32:17.024Z (about 1 month ago)
Topics: fullstack, javascript, reactjs, supabase, supabase-ssr, tanstack, tanstack-router, tanstack-start
Language: TypeScript
Homepage:
Size: 200 KB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# TanStack Start Example with Basic Auth

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.

## Videos

- YouTube Video About this Project -https://youtu.be/PbK9vTOt37A
- See walkthrough of basic auth application flow here in this video - https://youtu.be/kpjU2nMbZdw
- First video setting up basic Tanstack Start Application - https://youtu.be/oOqjZWpb-EI

## Project Structure

- `/app`: Contains the main application code
- `/components`: Reusable React components
- `/routes`: Route components and API handlers
- `/_authed`: Route Components for authenticated users
- `/styles`: CSS styles, including Tailwind configuration
- `/utils`: Utility functions and services
- `/public`: Static assets

## Features

- React-based frontend with TanStack Router for routing
- Authentication - Login, Logout, Create Account
- Protecting Pages for Authenticated Users
- Saving Information In Session
- Server-side rendering (SSR) support
- API routes for backend functionality
- Tailwind CSS for styling

## Technologies Used

- [TanStack Start](https://tanstack.com/start)
- [TanStack Router](https://tanstack.com/router)
- [Supabase](https://supabase.io/)
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Vite](https://vitejs.dev/)

## Setup and Installation

1. Clone the repository
2. Install dependencies:
```
npm install
```
3. Set up the environment variables: Create a `.env` file in the root of your project and add your
Supabase credentials:
```
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key
```
4. Start the development server:
```
npm run dev
```

## Available Scripts

- `npm run dev`: Start the development server
- `npm run build`: Build the production-ready application
- `npm run start`: Start the production server
- `npm run format`: Format code using Prettier
- `npm run lint`: Lint the codebase using ESLint
- `npm run test`: Run the test suite

## Development

This project uses Vite for fast development and building. The development server will rebuild assets
on file changes.

## Routing

Routing is handled by TanStack Router. Route components are located in the `/app/routes` directory.
The application includes protected routes that require authentication, ensuring that only logged-in
users can access certain pages.

## Authentication

The application uses Supabase for user authentication. It supports user login, signup, and session
management. The authentication flow is handled through server functions that interact with
Supabase's authentication API.

- **Login**: Users can log in with their email and password. Upon successful login, they are
redirected to the home page.
- **Signup**: New users can create an account by providing their email, password, first name, and
last name. After successful signup, they are redirected to the home page.
- **Session Management**: The application maintains user sessions, allowing users to stay logged in
across page refreshes.

## Styling

Tailwind CSS is used for styling. The main CSS file is located at `/app/styles/app.css`.

## API Routes

API routes are defined in the `/app/routes/api` directory. These routes handle server-side logic and
database operations.

## Deployment and Production

This project uses Vinxi, a powerful meta-framework for building full-stack JavaScript applications.
To deploy the application:

1. Build the project:

```
npm run build
```

This command uses Vinxi to build the application with the `node-server` preset, optimizing it for
server-side rendering with a Node.js backend.

2. Start the production server:
```
npm run start
```
This command starts the Vinxi server in production mode, serving your built application.

### Node.js Server

The built project runs on a Node.js server, which handles both serving the static assets and
server-side rendering (SSR) of your React application. This setup provides several benefits:

- Improved initial page load times due to server-side rendering
- Better SEO as search engines can crawl the fully rendered content
- Seamless handling of both client-side and server-side routing

### Supabase Information

### Table

```sql
create table
public.things (
id bigint generated by default as identity,
created_at timestamp with time zone not null default now(),
title text null,
description text null,
file_name text null,
file_id text null,
file_path text null,
constraint things_pkey primary key (id)
) tablespace pg_default;
```

Permissions

```sql
alter policy "Enable all for authenticated users only"
on "public"."things"
to authenticated
using (
true
);
```

### Bucket

```sql
-- Create the 'things' bucket
insert into storage.buckets (id, name, public)
values ('things', 'things', false);

-- Allow authenticated users to upload files
alter policy "Allow authenticated uploads"
on storage.objects
for insert
to authenticated
with check (
bucket_id = 'things' AND
auth.role() = 'authenticated'
);

-- Allow authenticated users to read files
alter policy "Allow authenticated downloads"
on storage.objects
for select
to authenticated
using (
bucket_id = 'things' AND
auth.role() = 'authenticated'
);

-- Enable RLS
alter table storage.objects enable row level security;
```