A sample repository demonstrating how to implement authentication in React Router applications using remix-auth. This project showcases multiple authentication strategies including GitHub OAuth and Trinsic authentication.
- 🔒 Multiple authentication strategies (GitHub, Trinsic)
- 🛡️ Protected routes with authentication guards
- 🔄 Session management with cookies
- 🧩 TypeScript for type safety
- 🎨 Clean UI with Tailwind CSS
- 📱 Responsive design
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/lucasamonrc/auth101.git cd auth101 -
Install dependencies:
npm install
-
Create a
.envfile in the root directory with the following variables:GITHUB_CLIENT_ID=your_github_client_id GITHUB_CLIENT_SECRET=your_github_client_secret TRINSIC_ACCESS_TOKEN=your_trinsic_access_token -
Start the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173
- User navigates to the login page
- User selects an authentication provider (GitHub or Trinsic)
- User is redirected to the provider's authentication page
- After successful authentication, the provider redirects back to our callback URL
- The application creates a session for the authenticated user
- User is redirected to the protected home page
app/
├── models/ # Data models
├── routes/ # Application routes
│ ├── auth/ # Authentication routes
│ │ ├── github/ # GitHub authentication
│ │ └── trinsic/ # Trinsic authentication
│ ├── home.tsx # Protected home page
│ └── login.tsx # Login page
├── services/ # Services
│ └── authenticator.ts # Authentication service
└── sessions.server.ts # Session management
- React Router v7: For routing and navigation
- remix-auth: Authentication library for React applications
- TypeScript: For type safety
- Tailwind CSS: For styling
- Vite: For fast development and building
- React Router Documentation
- remix-auth Documentation
- GitHub OAuth Documentation
- Trinsic Documentation
- React Router team for the amazing routing library
- Sergio Xalambrí for creating remix-auth