# 🔥 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]

##

[![Readme was generated by Dokugen](https://img.shields.io/badge/Readme%20was%20generated%20by-Dokugen-brightgreen)](https://www.npmjs.com/package/dokugen)