This project is designed to demonstrate the implementation of OAuth2 authentication with Google and Discord in a web application. It consists of two parts: a backend built with NestJS and a frontend developed using React. The backend uses various libraries, including TypeORM, PassportJS, and JWT for authentication, while the frontend communicates with the backend using Axios.
Before you begin, ensure you have the following software and tools installed:
- Node.js and npm or yarn
- PostgreSQL
To enable OAuth2 authentication with Google and Discord, you need to obtain API credentials for each service.
1- Go to the Google Developers Console.
2- Create a new project or select an existing one.
3- In the project dashboard, navigate to "APIs & Services" > "Credentials."
4- Click on "Create Credentials" and choose "OAuth client ID."
5- Select "Web application" as the application type.
6- Enter a name for your OAuth client.
7- Add authorized redirect URIs (e.g.,http://localhost:5000/auth/google/callback).
8-Note the Client ID and Client Secret.
1- Visit the Discord Developer Portal.
2- Click on "New Application" and give your application a name.
3- Go to the "OAuth2" section.
4- Under "Redirects," add a redirect URL (e.g., http://localhost:5000/auth/discord/callback).
5- Save the changes, and in the "OAuth2" section, you'll find your Client ID and Client Secret.
In the project's root directory, create a /back/.env file and add the following environment variables with the credentials you obtained:
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
TYPEORM_HOST=your-database-host
TYPEORM_USERNAME=your-database-username
TYPEORM_PASSWORD=your-database-password
TYPEORM_DATABASE=your-database-name
TYPEORM_PORT=your-database-port
JWT_SECRET=your-jwt-secret
SERVER_URL=your-server-url
DISCORD_CLIENT_SECRET=your-discord-client-secret
DISCORD_CLIENT_ID=your-discord-client-id