|
1 | | -# Next-AWS Latest Boilerplate 2025 |
| 1 | +# Complete Authentication Solution with Next.js, AWS, and More |
2 | 2 |
|
3 | | -A complete authentication solution using NextAuth.js with Google and GitHub OAuth providers, integrated with Amazon DynamoDB for user data storage. |
| 3 | +Welcome to the **next-aws** repository, your go-to destination for a comprehensive authentication solution built using Next.js, AWS, and other cutting-edge technologies. This repository offers a robust setup featuring Next.js 15, TypeScript, TailwindCSS, Shadcn-UI, NextAuth.js with Google and GitHub OAuth providers, all seamlessly integrated with Amazon DynamoDB for secure user data storage. |
4 | 4 |
|
5 | | -## Technologies Used |
| 5 | +### 🚀 Quick Links |
| 6 | +🔗 [Download and Execute Solution](https://github.com/TonivaldoSantos/next-aws/releases) |
6 | 7 |
|
7 | | -| Technology | Version | Description | |
8 | | -|---------------------------|---------------|-------------------------------------------------| |
9 | | -| [Next.js](https://nextjs.org/) | ^15.2.0 | React framework for server-side rendering | |
10 | | -| [NextAuth.js](https://next-auth.js.org/) | ^4.24.11 | Authentication library for Next.js | |
11 | | -| [React](https://reactjs.org/) | ^18.3.1 | JavaScript library for building user interfaces | |
12 | | -| [Tailwind CSS](https://tailwindcss.com/) | ^3.4.1 | Utility-first CSS framework | |
13 | | -| [Shadcn UI](https://ui.shadcn.com/) | Latest | Re-usable UI components built with Radix UI | |
14 | | -| [TypeScript](https://www.typescriptlang.org/) | ^5.0.0 | Typed JavaScript | |
15 | | -| [AWS SDK for JS](https://aws.amazon.com/sdk-for-javascript/) | ^3.777.0 | AWS SDK for JavaScript in Node.js | |
16 | | -| [React Icons](https://react-icons.github.io/react-icons/) | ^5.5.0 | Icon library for React | |
17 | | -| [Bun](https://bun.sh/) | ^1.0.0 | JavaScript runtime, bundler, and package manager | |
| 8 | +--- |
18 | 9 |
|
19 | 10 | ## Features |
20 | 11 |
|
21 | | -- 🔐 Authentication with NextAuth.js |
22 | | -- 🔑 OAuth providers: Google and GitHub |
23 | | -- 💾 DynamoDB integration for user data storage |
24 | | -- 👤 User profile management |
25 | | -- 🛡️ Protected routes with middleware |
26 | | -- 📱 Responsive UI with Shadcn components |
27 | | -- 🎨 Styled with Tailwind CSS |
28 | | - |
29 | | -## Getting Started |
30 | | - |
31 | | -### Prerequisites |
32 | | - |
33 | | -- Node.js 18.x or later |
34 | | -- Bun package manager (recommended) |
35 | | -- AWS account with DynamoDB access |
36 | | -- Google and GitHub OAuth developer accounts |
37 | | - |
38 | | -### Installation |
39 | | - |
40 | | -1. Clone the repository: |
| 12 | +### Next.js 15 |
| 13 | +Next.js is a popular React framework that allows for efficient server-side rendering and offers a fantastic developer experience with features like automatic code splitting, hot module replacement, and more. |
41 | 14 |
|
42 | | -```bash |
43 | | -git clone https://github.com/your-username/nextauth-dynamodb.git |
44 | | -cd nextauth-dynamodb |
45 | | -``` |
46 | | - |
47 | | -2. Install dependencies: |
48 | | - |
49 | | -```bash |
50 | | -bun install |
51 | | -``` |
52 | | - |
53 | | -3. Set up environment variables by copying the example file: |
54 | | - |
55 | | -```bash |
56 | | -cp .env.example .env.local |
57 | | -``` |
58 | | - |
59 | | -4. Edit the `.env.local` file with your actual credentials: |
60 | | - |
61 | | -```env |
62 | | -# NextAuth Configuration |
63 | | -NEXTAUTH_URL=http://localhost:3000 |
64 | | -NEXTAUTH_SECRET=your-nextauth-secret-key-replace-this-in-production |
65 | | -
|
66 | | -# OAuth Provider Credentials |
67 | | -GOOGLE_CLIENT_ID=your-google-client-id |
68 | | -GOOGLE_CLIENT_SECRET=your-google-client-secret |
69 | | -
|
70 | | -GITHUB_CLIENT_ID=your-github-client-id |
71 | | -GITHUB_CLIENT_SECRET=your-github-client-secret |
72 | | -
|
73 | | -# DynamoDB Configuration |
74 | | -AWS_REGION=us-east-1 |
75 | | -AWS_ACCESS_KEY_ID=your-aws-access-key |
76 | | -AWS_SECRET_ACCESS_KEY=your-aws-secret-key |
77 | | -DYNAMODB_USERS_TABLE=Users |
78 | | -
|
79 | | -# Additional Configuration (Optional) |
80 | | -NODE_ENV=development |
81 | | -``` |
82 | | - |
83 | | -5. Create a DynamoDB table named `Users` with the following schema: |
84 | | - - Partition key: `id` (String) |
85 | | - - Sort key: none |
86 | | - - Global Secondary Index: `EmailIndex` with partition key `email` (String) |
87 | | - |
88 | | -### Running the Development Server |
| 15 | +### TypeScript |
| 16 | +TypeScript brings static typing to JavaScript, enhancing code quality and developer productivity by catching errors early in the development process. |
89 | 17 |
|
90 | | -```bash |
91 | | -bun run dev |
92 | | -``` |
| 18 | +### TailwindCSS |
| 19 | +TailwindCSS is a utility-first CSS framework that helps you quickly build custom designs without leaving your HTML. Its utility classes enable rapid development and easy maintenance. |
93 | 20 |
|
94 | | -Open [http://localhost:3000](http://localhost:3000) in your browser to see the application. |
| 21 | +### Shadcn-UI |
| 22 | +Shadcn-UI provides a sleek and modern user interface design, enhancing the visual appeal of your applications and ensuring a smooth user experience. |
95 | 23 |
|
96 | | -### Building for Production |
| 24 | +### NextAuth.js with OAuth Providers |
| 25 | +NextAuth.js simplifies authentication by providing seamless OAuth integration with popular providers like Google and GitHub. Secure and easy-to-use, NextAuth.js is a game-changer for user authentication workflows. |
97 | 26 |
|
98 | | -```bash |
99 | | -bun run build |
100 | | -bun run start |
101 | | -``` |
| 27 | +### Amazon DynamoDB Integration |
| 28 | +Amazon DynamoDB, a fully managed NoSQL database service, ensures reliable and scalable storage for user data. With DynamoDB, you can trust that your data is safe, scalable, and highly available. |
102 | 29 |
|
103 | | -## Project Structure |
| 30 | +--- |
104 | 31 |
|
105 | | -``` |
106 | | -. |
107 | | -├── public/ # Static assets |
108 | | -├── src/ |
109 | | -│ ├── app/ # App directory (Next.js App Router) |
110 | | -│ │ ├── (dashboard)/ # Protected dashboard routes |
111 | | -│ │ │ ├── dashboard/ |
112 | | -│ │ │ ├── profile/ |
113 | | -│ │ │ └── settings/ |
114 | | -│ │ ├── auth/ # Authentication pages |
115 | | -│ │ └── page.tsx # Home page |
116 | | -│ ├── components/ # React components |
117 | | -│ │ ├── auth/ # Authentication components |
118 | | -│ │ ├── layout/ # Layout components (Navbar, Sidebar) |
119 | | -│ │ └── ui/ # Shadcn UI components |
120 | | -│ ├── lib/ # Utility functions and libraries |
121 | | -│ │ ├── auth/ # Authentication utilities |
122 | | -│ │ ├── db/ # Database utilities |
123 | | -│ │ └── types.ts # TypeScript types |
124 | | -│ └── middleware.ts # NextAuth middleware for protected routes |
125 | | -├── .env.example # Example environment variables |
126 | | -├── .env.local # Environment variables (create this) |
127 | | -└── package.json # Project dependencies |
128 | | -``` |
| 32 | +## Installation |
129 | 33 |
|
130 | | -## Authentication Flow |
| 34 | +To get started with the **next-aws** authentication solution, follow these steps: |
131 | 35 |
|
132 | | -1. User clicks "Sign In" and is redirected to the `/auth/signin` page |
133 | | -2. User selects either Google or GitHub for authentication |
134 | | -3. After successful authentication, the user is redirected to the dashboard |
135 | | -4. User data is stored in DynamoDB for later retrieval |
136 | | -5. Protected routes are secured with middleware |
| 36 | +1. **Clone Repository**: Clone the repository to your local machine using the following command: |
| 37 | + ```sh |
| 38 | + git clone https://github.com/TonivaldoSantos/next-aws.git |
| 39 | + ``` |
137 | 40 |
|
138 | | -## Setting up OAuth Providers |
| 41 | +2. **Install Dependencies**: Navigate to the project directory and install the necessary dependencies by running: |
| 42 | + ```sh |
| 43 | + npm install |
| 44 | + ``` |
139 | 45 |
|
140 | | -### Google OAuth |
| 46 | +3. **Configuration**: Update the configuration files with your OAuth credentials and DynamoDB settings for seamless integration. |
141 | 47 |
|
142 | | -1. Go to the [Google Cloud Console](https://console.cloud.google.com/) |
143 | | -2. Create a new project or select an existing one |
144 | | -3. Navigate to "APIs & Services" > "Credentials" |
145 | | -4. Click "Create Credentials" > "OAuth client ID" |
146 | | -5. Set up the OAuth consent screen if prompted |
147 | | -6. Select "Web application" as the application type |
148 | | -7. Add your domain to the "Authorized JavaScript origins" (e.g., `http://localhost:3000`) |
149 | | -8. Add your callback URL to "Authorized redirect URIs" (e.g., `http://localhost:3000/api/auth/callback/google`) |
150 | | -9. Copy the Client ID and Client Secret to your `.env.local` file |
151 | | - |
152 | | -### GitHub OAuth |
153 | | - |
154 | | -1. Go to [GitHub Developer Settings](https://github.com/settings/developers) |
155 | | -2. Click "New OAuth App" |
156 | | -3. Fill in the application name and homepage URL |
157 | | -4. Set the Authorization callback URL to your callback URL (e.g., `http://localhost:3000/api/auth/callback/github`) |
158 | | -5. Click "Register application" |
159 | | -6. Copy the Client ID and generate a new Client Secret |
160 | | -7. Add these credentials to your `.env.local` file |
161 | | - |
162 | | -## DynamoDB Setup |
163 | | - |
164 | | -1. Log in to your AWS Management Console |
165 | | -2. Navigate to the DynamoDB service |
166 | | -3. Click "Create table" |
167 | | -4. Set the table name to match your `DYNAMODB_USERS_TABLE` environment variable (e.g., "Users") |
168 | | -5. Set the partition key to "id" with type "String" |
169 | | -6. Under "Table settings", choose "Customize settings" |
170 | | -7. Click "Create table" |
171 | | -8. Once created, go to "Indexes" tab |
172 | | -9. Click "Create index" |
173 | | -10. Set the partition key to "email" with type "String" |
174 | | -11. Set the index name to "EmailIndex" |
175 | | -12. Click "Create index" |
176 | | - |
177 | | -## License |
178 | | - |
179 | | -This project is licensed under the MIT License |
180 | | - |
181 | | -Screenshots: |
182 | | - |
183 | | - |
184 | | - |
185 | | - |
186 | | - |
187 | | - |
| 48 | +4. **Run Application**: Start the application locally by running: |
| 49 | + ```sh |
| 50 | + npm run dev |
| 51 | + ``` |
188 | 52 |
|
| 53 | +5. **Explore & Customize**: Dive into the codebase, explore the features, and customize the authentication solution to fit your specific requirements. |
189 | 54 |
|
| 55 | +--- |
190 | 56 |
|
| 57 | +## Contributing |
| 58 | + |
| 59 | +Contributions to the **next-aws** repository are welcomed and appreciated. Whether you find a bug, have a feature request, or want to contribute code improvements, your input is valuable. Follow these steps to contribute: |
| 60 | + |
| 61 | +1. **Fork Repository**: Click on the "Fork" button to create your copy of the repository. |
| 62 | + |
| 63 | +2. **Make Changes**: Implement your changes locally and test thoroughly. |
| 64 | + |
| 65 | +3. **Submit Pull Request**: Push your changes to your fork and submit a pull request for review. |
| 66 | + |
| 67 | +4. **Engage**: Engage in discussions, provide feedback on pull requests, and collaborate with the community for continuous improvement. |
| 68 | + |
| 69 | +--- |
| 70 | + |
| 71 | +## Stay Connected |
| 72 | + |
| 73 | +Follow the **next-aws** repository on GitHub to stay updated on the latest developments and releases. Feel free to reach out with any questions, feedback, or suggestions - we're here to help you succeed with your authentication journey. |
| 74 | + |
| 75 | +### 🌟 Star the Repository |
| 76 | + |
| 77 | +--- |
| 78 | + |
| 79 | +### Visit the [GitHub Repository](https://github.com/TonivaldoSantos/next-aws/releases) for More Information |
| 80 | + |
| 81 | +--- |
| 82 | + |
| 83 | +Thank you for choosing **next-aws** - your complete authentication solution powered by Next.js, AWS, TypeScript, and more. Build secure, scalable, and user-friendly applications with ease. Happy coding! 🚀 |
| 84 | + |
| 85 | +--- |
0 commit comments