Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tcdtist/my-auth-jose-next
A simple authentication system using Next.js, React, and JSON Web Tokens (JWT)
https://github.com/tcdtist/my-auth-jose-next
Last synced: 20 days ago
JSON representation
A simple authentication system using Next.js, React, and JSON Web Tokens (JWT)
- Host: GitHub
- URL: https://github.com/tcdtist/my-auth-jose-next
- Owner: tcdtist
- License: mit
- Created: 2024-09-15T06:13:58.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-15T10:47:08.000Z (4 months ago)
- Last Synced: 2024-11-09T14:33:59.509Z (3 months ago)
- Language: TypeScript
- Homepage: https://tcdtist-auth-jose-next-demo.vercel.app
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Next.js Authentication Demo
This project demonstrates a simple authentication system using Next.js, React, and JSON Web Tokens (JWT). It features a modern, responsive login interface with a glassmorphism design.
## Features
- User authentication with JWT
- Server-side rendering with Next.js
- Responsive design for all screen sizes
- Modern UI with gradient and glassmorphism effects
## Technologies Used
- Next.js 14
- React
- TypeScript
- CSS Modules
- jose (for JWT handling)
## Getting Started
### Prerequisites
- Node.js (v14 or later)
- npm or yarn
### Installation
1. Clone the repository:
```
git clone https://github.com/your-username/nextjs-auth-demo.git
```
2. Navigate to the project directory:
```
cd nextjs-auth-demo
```
3. Install dependencies:
```
npm install
```
or
```
yarn install
```
4. Run the development server:
```
npm run dev
```
or
```
yarn dev
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
## Project Structure
- `app/`: Contains the main application pages and components
- `lib/`: Houses utility functions for authentication and session management
- `styles/`: Includes global styles and CSS modules
## Key Components
- `app/layout.tsx`: The root layout component
- `app/page.tsx`: The main page component with login/logout functionality
- `lib.ts`: Utility functions for JWT encryption, decryption, and session management
## Authentication Flow
1. User enters email and submits the login form
2. Server-side action creates a session with JWT
3. Session is stored in an HTTP-only cookie
4. User can log out, which clears the session cookie
## Styling
The project uses CSS Modules for component-specific styling. The login interface features:
- Gradient background
- Glassmorphism effect for the login box
- Responsive design for various screen sizes
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is open source and available under the [MIT License](LICENSE).