Auth Google GitHub

This is a Next.js project that provides authentication using Google and GitHub.

Table of Contents

• Getting Started
• Configuration
  • Google Authentication
  • GitHub Authentication
• Folder Structure
• Deployment
• Learn More
• Contributing

Getting Started

First, clone the repository:

git clone https://github.com/arsath-eng/auth-google-github.git
cd auth-google-github

Install the dependencies:

npm install
# or
yarn install

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Configuration

Google Authentication

1. Create a project in the Google Developers Console.
2. Enable the Google+ API and create OAuth 2.0 credentials.
3. Set the credentials in your environment variables:

GOOGLE_CLIENT_ID=your-google-client-idGOOGLE_CLIENT_SECRET=your-google-client-secret

GitHub Authentication

1. Create a new OAuth application in your GitHub settings.
2. Set the credentials in your environment variables:

GITHUB_CLIENT_ID=your-github-client-idGITHUB_CLIENT_SECRET=your-github-client-secret

Folder Structure

├── .next
├── app
│ ├── actions
│ │ └── index.js
│ ├── api
│ │ └── auth
│ │ └── [...nextauth].ts
│ ├── home
│ │ ├── page.jsx
│ │ └── route.ts
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ ├── page.tsx
│ ├── components
│ │ ├── LoginForm.jsx
│ │ └── Logout.jsx
├── node_modules
├── public
├── .env
├── .eslintrc.json
├── .gitignore
├── auth.js
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── README.md
├── tailwind.config.ts
├── tsconfig.json

Configuration Files

next.config.mjs

constnextConfig={images: {remotePatterns: [{protocol: 'https',hostname: 'lh3.googleusercontent.com',},{protocol: 'https',hostname: 'avatars.githubusercontent.com',},],},};exportdefaultnextConfig;

Deployment

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.