2. Click on the project name and then select `APIs & Services` on your left sidebar tab. Click on `OAuth consent screen` and fill in the required details.
3. Click on `Credentials` on your left sidebar tab and then click on `Create Credentials` and select `OAuth client ID`.
> Refer here to know more about: [Creating Database on the platform](/datasources/quickstart)
2. Create a new environment and map the added database to the environment. Here we are using the `development` environment and `employees` database
> Refer here to know more about: [Creating Environments on the platform](/basics/environment)
3. Add the `Google` authentication connection under Methods. Click `Add Connection` to create a new connection with the `Client ID` and `Client Secret` you copied from the Google Developers Console.
> Refer here to know more about: [Adding Authentication on the platform](/authentication/quickstart)
4. Go to `Settings` section in the dashboard and the Redirect URL. Here the redirect URL is `http://localhost:3000/dashboard` as we are using the local ReactJS application URL for this tutorial. You can replace it with your actual ReactJS application URL when rolling out to production. Example: `https://your-reactjs-app.com`.
This is the url where the user data response with be appended to the query params after successful authentication.
5. Now, go to `Environments` sections and select the environment you created. Copy the `Auth Endpoint URL` from the environment details. This is your authentication endpoint URL where you will be sending the APi requests. Your Auth endpoint URL looks similar to this:
The oauth api endpath is **/oauth** and environment url **[http://authn.zeromagic.cloud/auth/86165f63f34e4be89809c2948c424a99/development/](http://authn.zeromagic.cloud/auth/86165f63f34e4be89809c2948c424a99/development/)**. So, the final URL will be
```curl OAuth Endpoint theme={null}
http://authn.zeromagic.cloud/auth/86165f63f34e4be89809c2948c424a99/development/oauth
```
6. Before making the API request, let's **create a new user credentials** in the database for this example. You can **skip this step if your preferring to go with registering the user** and login with that user credentials.
> While using OAuth, if the email id is not found in the database, the user will be registered with the email id and the user will be logged in. If the email id is found in the database, the user will be logged in.
## Step-3 : Create Login Page and Dashboard Page in ReactJS
Now,let's create our simple frontend UI using ReactJS. We will create a login page where the user can click on the Google sign-in button and redirect them to the dashboard page after successful authentication.
1. Create a new React project using the following command.
```bash theme={null}
npx create-react-app googleauth-reactjs
```
2. Add this dependency to your project using the following command:
```bash theme={null}
npm install react-router-dom
```
3. Update `App.js` with the provided code
```jsx App.js theme={null}
import './App.css';
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import LoginPage from './login';
import DashboardPage from './dashboard';
function App() {
return (
Please log in with your Google account
User ID: {user_id}
Email: {email}
Access Token: {access_token}
Token Type: {token_type}
Expires In: {expires_in}
Click on the `Login with Google` button. You will be redirected to the Google sign-in page. Sign in with your Google account.
On successful, you will be redirected to the dashboard page with the user details.
## Summary
In this tutorial, you learned how to login application with Google OAuth using React JS and Zeromagic authentication API. This is a basic example to get you started with authentication in Zeromagic.
We provide more basic authentication methods and advanced method like social login. Feel free to explore the Authentication API Reference and reach out to us if you have any questions.
## Resource Links
* [Authentication API Reference](/authentication/api/generalinfo)