How to setUp AuthO API in React
Published: 2023-07-23 06:34:47

Are you a frontend developer,Without any backend programming knowledge which is responsible for authenticating your Users into your app.Maybe,you are a backend developer who is tired of debugging your Authentication MVC model.Here is a step to step tutorial with a few clicks to set you on the go.

## What is OAuth
Auth0 is a cloud-based identity and access management (IAM) platform that offers authentication and authorization as a service. It provides developers with a set of tools and APIs to easily add secure authentication and authorization functionalities to their web and mobile applications.

##The key features of Auth0 include:
-Authentication: Auth0 supports various authentication methods, such as social login (e.g., Google, Facebook, Twitter), username/password authentication, multi-factor authentication (MFA), and more. This allows developers to offer users multiple ways to log in to their applications securely.

-Authorization: Auth0 provides a flexible and customizable authorization system that allows developers to define fine-grained access control policies for their resources. This helps ensure that users only have access to the resources they are authorized to use.

-Single Sign-On (SSO): Auth0 enables single sign-on, allowing users to log in once and access multiple applications without the need to re-enter their credentials for each one.

- Developer-Friendly: Auth0 provides SDKs and libraries for various programming languages and platforms, making it developer-friendly and straightforward to integrate authentication and authorization functionalities into applications.

## Steps to follow

1.Create a new Account
-Navigate to [](https://auth0.com/signup?place=header&type=button&text=sign%20up)
-Sign up if You do not have an already signed in account
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybyvhzbnmzkns3h8c9pg.png)
-On success upon sign up or login You will be navigated to the user dashboard where you are responsible of managing your apps.

2.Create an Application
-In the user dashboard click on the create application in the get started section

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eklt57357ooze1gycgtq.png)

- A pop-up will appear,enter the name of your app,beneath th name there are various options of application to create for the authentication.
-Since we are dealing with a frontend framework (React) choose SPWA(Single Page Web Page Application) option.
-On success You will be redirected to choose Your SPWA framework option,choose react

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or75ej8w8ztoqfza3n9p.png)

3.Auth settings & configuration

-Confirm that your panel has been set up and navigate to settings 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jb5tf0moy9vy9983ghx.png)

-In the settings section includes personal information about your API.

4.App code configuration
-Copy the clientId and Domain name mentioned in the settings panel safely since they are the essential information to gain access to our API.
-In your React application run 
```
npm i @auth0/auth0-react 
```
responsible for installing package for authO provider
-Back in your React code,make sure your app is wrapped with the authOprovider.
-copy and paste your domain and clientId as shown below

```
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Auth0Provider } from '@auth0/auth0-react';

const root = ReactDOM.createRoot(document.getElementById('root'));
// dev-bgl7q1jcjwnen30i.us.auth0.com
// BB6LuOvArlkD9hjzUdOcGJhhwKtlIkWv
root.render(
    <Auth0Provider
        domain="dev-bgl7q1jcjwnen30i.us.auth0.com"
        clientId="BB6LuOvArlkD9hjzUdOcGJhhwKtlIkWv"
        authorizationParams={{
            redirect_uri: window.location.origin,
        }}
    >
        
         <App />
                    
    </Auth0Provider>
);
```
5.Application properties
-If you have a logo deployed you may switch the logo URL
-Change the application type to Single Page Application

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s78bbhdk0pz0up9uudma.png)

6.Setting up Your App URI's
-Once you're done navigate to back to AuthO scroll down to Application URI.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m5dbqs9crbv1decdy12.png)

-Copy and paste your deployed react web app,if deployed else 
copy and paste your localhost URL in each of the entries within the application URI.

7.Confirmation
-Once you are done scroll to the bottom of the page and click on save changes 
-Launch you your app with 

```
npm run start
```
 command and hopefully on Launch when you click on the login.You'll see a page similar to this one:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8crfx6hzban97jy9wr8n.png)

Hope it was insightful don't forget to leave a thumb's Up