fauth-template
Version:
Generate auth templates for your projects
120 lines (82 loc) • 4.02 kB
Markdown
# 🔥 Auth Template - Next.js Edition 🔒
A modern authentication template built with Next.js, designed to kickstart your projects with secure and stylish user authentication. ✨
## ✨ Features
- 🔐 **Secure Authentication**: Implements robust user authentication with sign-up, sign-in, and session management.
- 🎨 **Modern UI**: Utilizes a sleek and modern design with components from Shadcn UI.
- 🛡️ **Middleware Protection**: Protects specific routes (e.g., `/profile`) using Next.js middleware.
- 📧 **Email/Password Auth**: Supports traditional email and password authentication.
- 🌐 **Axios Integration**: Uses Axios for making HTTP requests to the backend API.
- 🎨 **Customizable Themes**: Easily switch between light and dark themes using `next-themes`.
- 🔔 **Real-time Notifications**: Provides user feedback with `sonner` for toast notifications.
## 🛠️ Technologies Used
| Technology | Description | Link |
| :----------- | :----------------------------------------------------------------- | :---------------------------------------------------------------- |
| Next.js | React framework for building modern web applications | [https://nextjs.org/](https://nextjs.org/) |
| TypeScript | Superset of JavaScript that adds static typing | [https://www.typescriptlang.org/](https://www.typescriptlang.org/) |
| Tailwind CSS | Utility-first CSS framework for rapid UI development | [https://tailwindcss.com/](https://tailwindcss.com/) |
| Shadcn UI | Re-usable components built using Radix UI and Tailwind CSS | [https://ui.shadcn.com/](https://ui.shadcn.com/) |
| Axios | Promise based HTTP client for the browser and node.js | [https://axios-http.com/](https://axios-http.com/) |
| Sonner | Opinionated toast notifications | [https://sonner.emilkowalski.com/](https://sonner.emilkowalski.com/) |
## 🚀 Installation
Follow these steps to get the project running locally:
1. **Clone the repository:**
```bash
git clone https://github.com/onosejoor/auth-template.git
cd client
```
2. **Install dependencies:**
```bash
npm install
# or
yarn install
# or
pnpm install
```
3. **Run the development server:**
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## 💻 Usage
### Sign Up Form
The sign-up form (`src/app/signup/_components/signup-form.tsx`) allows new users to create an account.
```tsx
import SignUpForm from "./_components/signup-form"
export default function SignUpPage() {
return <SignUpForm />
}
```
### Sign In Form
The sign-in form (`src/app/signin/_components/signin-form.tsx`) allows existing users to log in.
```tsx
import SignInForm from "./_components/signin-form"
export default function SignInPage() {
return <SignInForm />
}
```
### Profile Page
The profile page (`src/app/profile/page.tsx`) displays user information and requires authentication.
```tsx
import { use } from "react"
import ProfilePage from "./_components/profile-page"
import { getUser } from "@/actions/getUser"
export default function Profile() {
const user = use(getUser())
if (!user.success) {
return new Error("Error fetching user")
}
return <ProfilePage user={user.user!} />
}
```
## 📝 License
This project is licensed under the [MIT License](LICENSE).
## 👨💻 Author Info
- Author: [Your Name]
- GitHub: [Your GitHub Link]
- Twitter: [Your Twitter Link]
##
[](https://www.npmjs.com/package/dokugen)