BUY THE FULL SOURCE CODE

Welcome folks today in this blog post we will be integrating auth0 library in react.js to integrate google oauth2 login and display profile info of user in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js app using the below command as shown below

npm i @auth0/auth-react

And now you will see the below directory structure of the final react.js project as shown below

And after that you need to go index.js file and copy paste the following code

index.js

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'));
root.render(
  <Auth0Provider
    domain="##yourowndomain##"
    clientId="####yourclientid####"
    authorizationParams={{
      redirect_uri: window.location.origin
    }}
  >
    <App />
  </Auth0Provider>
);

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'));

root.render(

<Auth0Provider

domain="##yourowndomain##"

clientId="####yourclientid####"

authorizationParams={{

redirect_uri: window.location.origin

}}

<App />

</Auth0Provider>

);

Here you need to replace your own details from the auth0 dashboard as shown below

Here you need to replace the localhost:3000 url to the callback url and also to the web origin and also to the logout url also.

Now we need to go to App.js` file and copy paste the below code

App.js

import "./App.css";
import { useAuth0 } from "@auth0/auth0-react";

function App() {
  const { user, loginWithRedirect, logout, isAuthenticated } = useAuth0();

  return (
    isAuthenticated ? (
      <div>
        <h3>The name is: {user.name}</h3><br/>
        <h3>The email is: {user.email}</h3><br/>
        <img src={user.picture}/><br/>
        <button onClick={() => logout()}>Logout</button>
      </div>
    ):(
      <div>
        <button onClick={() => loginWithRedirect()}>Login</button>
      </div>
    )
  )
}

export default App;

import "./App.css";

import { useAuth0 } from "@auth0/auth0-react";

function App() {

const { user, loginWithRedirect, logout, isAuthenticated } = useAuth0();

return (

isAuthenticated ? (

<div>

<h3>The email is: {user.email}</h3><br/>

<button onClick={() => logout()}>Logout</button>

</div>

):(

<div>

<button onClick={() => loginWithRedirect()}>Login</button>

</div>

)

}

export default App;

As you can see we are importing all the required methods from the auth0 package for login and logout and also we will be showing the user details in the react.js app.