8 |
10 | );
11 |
12 | export default AuthNav;
13 |
--------------------------------------------------------------------------------
/frontend/src/components/authentication-button.js:
--------------------------------------------------------------------------------
1 | // src/components/authentication-button.js
2 |
3 | import React from "react";
4 |
5 | import LoginButton from "./login-button";
6 | import LogoutButton from "./logout-button";
7 |
8 | import { useAuth0 } from "@auth0/auth0-react";
9 |
10 | const AuthenticationButton = () => {
11 | const { isAuthenticated } = useAuth0();
12 |
13 | return isAuthenticated ?
7 | 
8 |
21 | );
22 |
23 | export default Hero;
24 |
--------------------------------------------------------------------------------
/frontend/src/components/home-content.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { faLink } from "@fortawesome/free-solid-svg-icons";
4 |
5 | const HomeContent = () => (
6 | React Sample Project
9 |10 | This is a sample application that demonstrates an authentication flow for 11 | an SPA, using{" "} 12 | 17 | React 18 | 19 |
20 |
7 |
91 | );
92 |
93 | export default HomeContent;
94 |
--------------------------------------------------------------------------------
/frontend/src/components/index.js:
--------------------------------------------------------------------------------
1 | import HomeContent from "./home-content";
2 | import Footer from "./footer";
3 | import Hero from "./hero";
4 | import Loading from "./loading";
5 | import NavBar from "./nav-bar";
6 |
7 | export { HomeContent, Footer, Hero, Loading, NavBar };
8 |
--------------------------------------------------------------------------------
/frontend/src/components/loading.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | const loadingImg =
3 | "https://cdn.auth0.com/blog/auth0-react-sample/assets/loading.svg";
4 |
5 | const Loading = () => (
6 | What can I do next?
8 | 9 |
10 |
49 |
50 |
11 |
12 |
17 |
21 |
27 |
28 |
29 |
30 |
12 |
17 |
21 | 22 | Auth0 supports social providers as Facebook, Twitter, Instagram and 23 | 100+, Enterprise providers as Microsoft Office 365, Google Apps, 24 | Azure, and more. You can also use any OAuth2 Authorization Server. 25 |
26 |
31 |
32 |
37 |
41 |
48 |
32 |
37 |
41 | 42 | Add an extra layer of security by enabling Multi-factor 43 | Authentication, requiring your users to provide more than one piece of 44 | identifying information. Push notifications, authenticator apps, SMS, 45 | and DUO Security are supported. 46 |
47 |
51 |
90 |
52 |
53 |
58 |
62 |
68 |
69 |
70 |
71 |
53 |
58 |
62 | 63 | Auth0 can detect anomalies and stop malicious attempts to access your 64 | application. Anomaly detection can alert you and your users of 65 | suspicious activity, as well as block further login attempts. 66 |
67 |
72 |
73 |
78 |
82 |
89 |
73 |
78 |
82 | 83 | Rules are JavaScript functions that execute when a user authenticates 84 | to your application. They run once the authentication process is 85 | complete, and you can use them to customize and extend Auth0's 86 | capabilities. 87 |
88 |
7 | 
8 |
9 | );
10 |
11 | export default Loading;
12 |
--------------------------------------------------------------------------------
/frontend/src/components/login-button.js:
--------------------------------------------------------------------------------
1 | // src/components/login-button.js
2 |
3 | import React from "react";
4 | import { useAuth0 } from "@auth0/auth0-react";
5 |
6 | const LoginButton = () => {
7 | const { loginWithRedirect } = useAuth0();
8 | return (
9 |
15 | );
16 | };
17 |
18 | export default LoginButton;
19 |
--------------------------------------------------------------------------------
/frontend/src/components/logout-button.js:
--------------------------------------------------------------------------------
1 | // src/components/logout-button.js
2 |
3 | import React from "react";
4 | import { useAuth0 } from "@auth0/auth0-react";
5 |
6 | const LogoutButton = () => {
7 | const { logout } = useAuth0();
8 | return (
9 |
19 | );
20 | };
21 |
22 | export default LogoutButton;
23 |
--------------------------------------------------------------------------------
/frontend/src/components/main-nav.js:
--------------------------------------------------------------------------------
1 | import {NavLink} from "react-router-dom";
2 | import React from "react";
3 |
4 | const MainNav = () => (
5 |
6 |
12 | Home
13 |
14 |
20 | Profile
21 |
22 |
28 | External API
29 |
30 |
31 | );
32 |
33 | export default MainNav;
34 |
--------------------------------------------------------------------------------
/frontend/src/components/nav-bar.js:
--------------------------------------------------------------------------------
1 | // src/components/nav-bar.js
2 |
3 | import React from "react";
4 |
5 | import MainNav from "./main-nav";
6 | import AuthNav from "./auth-nav";
7 |
8 | const NavBar = () => {
9 | return (
10 |
11 |
18 |
19 | );
20 | };
21 |
22 | export default NavBar;
23 |
--------------------------------------------------------------------------------
/frontend/src/components/signup-button.js:
--------------------------------------------------------------------------------
1 | // src/components/signup-button.js
2 |
3 | import React from "react";
4 | import { useAuth0 } from "@auth0/auth0-react";
5 |
6 | const SignupButton = () => {
7 | const { loginWithRedirect } = useAuth0();
8 | return (
9 |
19 | );
20 | };
21 |
22 | export default SignupButton;
23 |
--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | overflow-y: scroll;
10 | }
11 |
12 | code {
13 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
14 | monospace;
15 | }
16 |
17 | .next-steps .fa-link {
18 | margin-right: 5px;
19 | }
20 |
21 | /* Fix for use only flexbox in content area */
22 | .next-steps .row {
23 | margin-bottom: 0;
24 | }
25 |
26 | .next-steps .col-md-5 {
27 | margin-bottom: 3rem;
28 | }
29 |
30 | @media (max-width: 768px) {
31 | .next-steps .col-md-5 {
32 | margin-bottom: 0;
33 | }
34 | }
35 |
36 | .spinner {
37 | position: absolute;
38 | display: flex;
39 | justify-content: center;
40 | height: 100vh;
41 | width: 100vw;
42 | background-color: white;
43 | top: 0;
44 | bottom: 0;
45 | left: 0;
46 | right: 0;
47 | }
48 |
49 | .result-block-container .result-block {
50 | opacity: 1;
51 | }
52 |
53 | .loading {
54 | display: flex;
55 | min-height: 500px;
56 | align-items: center;
57 | justify-content: center;
58 | }
59 |
60 | .userImg {
61 | border-radius: 100px;
62 | display: block;
63 | height: 100px;
64 | margin: 0 auto;
65 | width: 100px;
66 | }
67 |
68 | .hero .app-logo {
69 | max-width: 10.5rem;
70 | }
71 |
--------------------------------------------------------------------------------
/frontend/src/index.js:
--------------------------------------------------------------------------------
1 | // src/index.js
2 |
3 | import React from "react";
4 | import ReactDOM from "react-dom";
5 | import App from "./app";
6 | import { BrowserRouter as Router } from "react-router-dom";
7 | import Auth0ProviderWithHistory from "./auth/auth0-provider-with-history";
8 |
9 | import "./index.css";
10 |
11 | ReactDOM.render(
12 |
47 |
80 | );
81 | };
82 |
83 | export default ExternalApi;
84 |
--------------------------------------------------------------------------------
/frontend/src/views/home.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from "react";
2 |
3 | import { Hero, HomeContent } from "../components";
4 |
5 | const Home = () => (
6 | External API
48 |49 | Use these buttons to call an external API. The protected API call has an 50 | access token in its authorization header. The API server will validate 51 | the access token using the Auth0 Audience value. 52 |
53 |
58 |
61 |
68 |
69 | {message && (
70 |
71 |
78 | )}
79 | Result
72 |
73 |
77 |
74 |
76 | {message}
75 | 9 |
13 |
32 | );
33 | };
34 |
35 | export default Profile;
36 |
--------------------------------------------------------------------------------
/images/auth0-react.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/auth0-react-workshop/5fd13198c579a9122c2dd94ba5e9746555414198/images/auth0-react.jpg
--------------------------------------------------------------------------------
14 |
26 |
15 | 
20 |
21 |
22 |
25 | {name}
23 |{email}
24 |
27 |
31 |
28 | {JSON.stringify(user, null, 2)}
29 |
30 |