Introduction is an open source JavaScript library for building user interfaces in WEB and mobile applications. Currently, React is at version 17 and Meta (formerly Facebook) is the main maintainer of the project. React is an easy to implement, adaptable authentication and authorization platform. Auth0 Prerequisites Before you start, you need to install and configure the tools: git Node.js and npm IDE (e.g. or ) Visual Studio Code WebStorm Getting started Create and configure the account on the Auth0 Let's create the account. Access the site and do steps 1 and 9 of the post to create and configure the account on the Auth0. 1. https://auth0.com/ Authentication using the Auth0 to an Angular application In step 7 of the post above, fill in the field with the URL , fill in the fields , with the URL and click on the button . 2. Allowed Callback URLs http://localhost:3000/react-auth0/profile Allowed Logout URLs Allowed Web Origins http://localhost:3000/react-auth0 Save Changes Create the React application Let's create the application with the React base structure using the tool. 1. create-react-app npx create-react-app react-auth0 --template typescript

Creating a new React app in /home/rodrigokamada/Development/React/react-auth0.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...


added 1369 packages in 26s

169 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

added 38 packages, and changed 1 package in 5s

169 packages are looking for funding
  run `npm fund` for details

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using npm...


removed 1 package, and audited 1407 packages in 2s

169 packages are looking for funding
  run `npm fund` for details

8 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created react-auth0 at /home/rodrigokamada/Development/React/react-auth0
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-auth0
  npm start

Happy hacking! Install and configure the Material UI CSS framework. Do step 2 of the post . 2. Adding the Material UI CSS framework to an React application Install the and libraries. 3. @auth0/auth0-react react-router-dom npm install @auth0/auth0-react react-router-dom Create the component. 4. SignIn touch src/SignIn.tsx Add the lines in the file as below. 5. src/SignIn.tsx import { useAuth0 } from '@auth0/auth0-react'
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';

function SignIn() {
  const { loginWithRedirect } = useAuth0();

  return (
    <main style={{ padding: '1rem 0' }}>
      <Grid container>
        <Grid container justifyContent="center">
          <Button variant="contained" onClick={loginWithRedirect}>Sign In</Button>
        </Grid>
      </Grid>
    </main>
  );
}

export default SignIn; Create the component. 6. Profile touch src/Profile.tsx Add the lines in the file as below. 7. src/Profile.tsx import { useAuth0 } from '@auth0/auth0-react'
import Avatar from '@mui/material/Avatar';
import Grid from '@mui/material/Grid';
import TextField from '@mui/material/TextField';

function Profile() {
  const { isAuthenticated, user } = useAuth0();

  return (
    <main style={{ padding: '1rem 0' }}>
      {isAuthenticated &&
      <Grid container>
        <Grid container justifyContent="center">
          <Grid sx={{ m: 1 }}>
            <Avatar alt={user?.email} src={user?.picture} sx={{ width: 75, height: 75 }} />
          </Grid>
          <Grid item xs={12} sx={{ m: 1 }}>
            <TextField id="email" label="Email" value={user?.email} variant="outlined" fullWidth />
          </Grid>
          <Grid item xs={12} sx={{ m: 1 }}>
            <TextField id="nickname" label="Nickname" value={user?.nickname} variant="outlined" fullWidth />
          </Grid>
        </Grid>
      </Grid>
      }
    </main>
  );
}

export default Profile; Change the file. Import the component and configure the parameter with the Auth0 domain and the parameter with the Auth0 Client ID as below. 8. src/index.tsx Auth0Provider domain clientId import React from 'react';
import ReactDOM from 'react-dom';
import { Auth0Provider } from '@auth0/auth0-react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      domain="dev-5tf99p7c.us.auth0.com"
      clientId="GBPB42qhMWCtvrwGmYxvm5cbHXU68nzG"
      redirectUri={window.location.origin + '/react-auth0/profile'}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>,
  document.getElementById('root')
); Change the file. Add the menu and the routes in the file as below. 9. src/App.tsx src/Profile.tsx import React from 'react';
import { BrowserRouter, Link as RouterLink, Route, Routes } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Profile from './Profile';
import SignIn from './SignIn';
import './App.css';

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

  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);

  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorElNav(event.currentTarget);
  };

  const handleCloseNavMenu = () => {
    setAnchorElNav(null);
  };

  return (
    <Container maxWidth="xl" sx={{ p: '0px !important' }}>
      <BrowserRouter basename="/react-auth0">
        <AppBar position="static">
          <Container maxWidth="xl">
            <Toolbar disableGutters>
              <Typography
                variant="h6"
                noWrap
                component="div"
                sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
              >
                React Auth0
              </Typography>
              <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
                <IconButton
                  size="large"
                  aria-label="account of current user"
                  aria-controls="menu-appbar"
                  aria-haspopup="true"
                  onClick={handleOpenNavMenu}
                  color="inherit"
                >
                  <MenuIcon />
                </IconButton>
                <Menu
                  id="menu-appbar"
                  anchorEl={anchorElNav}
                  anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left',
                  }}
                  keepMounted
                  transformOrigin={{
                    vertical: 'top',
                    horizontal: 'left',
                  }}
                  open={Boolean(anchorElNav)}
                  onClose={handleCloseNavMenu}
                  sx={{
                    display: { xs: 'block', md: 'none' },
                  }}
                >
                  <MenuItem onClick={(e) => {
                      e.preventDefault();
                      window.location.href = 'https://rodrigokamada.github.io/angular-auth0/';
                    }}
                  >
                    <Typography textAlign="center">
                      <Button>Angular Application</Button>
                    </Typography>
                  </MenuItem>
                  {!isAuthenticated &&
                  <MenuItem onClick={handleCloseNavMenu}>
                    <Typography textAlign="center">
                      <Button component={RouterLink} to="/signIn">Sign In</Button>
                    </Typography>
                  </MenuItem>
                  }
                  {isAuthenticated &&
                  <MenuItem onClick={handleCloseNavMenu}>
                    <Typography textAlign="center">
                      <Button component={RouterLink} to="/profile">Profile</Button>
                    </Typography>
                  </MenuItem>
                  }
                  {isAuthenticated &&
                  <MenuItem onClick={() => {
                      handleCloseNavMenu();
                      logout({ returnTo: window.location.origin + '/react-auth0' });
                    }}
                  >
                    <Typography textAlign="center">
                      <Button >Sign Out</Button>
                    </Typography>
                  </MenuItem>
                  }
                </Menu>
              </Box>
              <Typography
                variant="h6"
                noWrap
                component="div"
                sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
              >
                React Auth0
              </Typography>
              <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
                <Button
                  onClick={(e) => {
                    e.preventDefault();
                    window.location.href = 'https://rodrigokamada.github.io/angular-auth0/';
                  }}
                  sx={{ my: 2, color: 'white', display: 'block' }}
                >
                  Angular Application
                </Button>
                {!isAuthenticated &&
                <Button
                  component={RouterLink}
                  to="/signIn"
                  sx={{ my: 2, color: 'white', display: 'block' }}
                >
                  Sign In
                </Button>
                }
                {isAuthenticated &&
                <Button
                  component={RouterLink}
                  to="/profile"
                  sx={{ my: 2, color: 'white', display: 'block' }}
                >
                  Profile
                </Button>
                }
                {isAuthenticated &&
                <Button
                  onClick={() => {
                    logout({ returnTo: window.location.origin + '/react-auth0' });
                  }}
                  sx={{ my: 2, color: 'white', display: 'block' }}
                >
                  Sign Out
                </Button>
                }
              </Box>
            </Toolbar>
          </Container>
        </AppBar>
        <Routes>
          <Route path="/profile" element={<Profile />} />
          <Route path="/signIn" element={<SignIn />} />
          <Route path="*" element={<SignIn />} />
        </Routes>
      </BrowserRouter>
    </Container>
  );
}

export default App; Run the application with the command below. 10. npm start

Compiled successfully!

You can now view react-auth0 in the browser.

  http://localhost:3000/react-auth0

Note that the development build is not optimized.
To create a production build, use npm run build.

assets by path static/js/*.js 2.79 MiB
  asset static/js/bundle.js 2.79 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.93 KiB [emitted] 1 related asset
asset index.html 1.74 KiB [emitted]
asset asset-manifest.json 518 bytes [emitted]
cached modules 2.66 MiB (javascript) 32.5 KiB (runtime) [cached] 602 modules
webpack 5.69.1 compiled successfully in 1275 ms Ready! Access the URL and check if the application is working. See the application working on and . 11. http://localhost:300/react-auth0 GitHub Pages Stackblitz Testing the application sign in Let's test the application sign in. Access the URL and click on the button . 1. http://localhost:3000/react-auth0 Sign in Click on the button . 2. Sign up Fill in the fields , and click on the button . 3. Email Address Password Continue Click on the button . 4. Accept You will be redirected to the application. 5. Check the registered email. 6. Ready! We test the application sign in and profile view. Auth0 documentation is available at . 7. https://auth0.com/docs The application repository is available at . https://github.com/rodrigokamada/react-auth0 This tutorial was posted on my in portuguese. blog

Facebook

Funding

Initialized

What is the Difference Between Encryption, Hashing and Salting?

Adding the Material UI CSS framework to a React Application

2021 - HackerNoon Contributor of the Year - WEB-DEVELOPMENT

2021 - HackerNoon Contributor of the Year - WEB

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Aws

Too Long; Didn't Read

Make resilience your competitive advantage

Authentication Using the Auth0 to a React Application

Authentication Using the Auth0 to a React Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Hosting an Angular application on GitHub Pages using GitHub Actions

Are Social Logins More Secure?

Authentication as a Service, an honest review of Auth0

Authentication: Create a Simple Rick and Morty Wiki Page

Authentication in Web Apps: Connecting Auth0, ASP.NET Core and Nuxt.js

Hosting an Angular application on GitHub Pages using GitHub Actions

Are Social Logins More Secure?

Authentication as a Service, an honest review of Auth0

Authentication: Create a Simple Rick and Morty Wiki Page

Authentication in Web Apps: Connecting Auth0, ASP.NET Core and Nuxt.js

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps