diff --git a/package-lock.json b/package-lock.json
index 574939e..3772756 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "auth0-react-sample",
       "version": "1.0.0",
       "dependencies": {
         "@auth0/auth0-react": "^1.1.0",
@@ -1918,7 +1919,6 @@
         "jest-resolve": "^26.6.1",
         "jest-util": "^26.6.1",
         "jest-worker": "^26.6.1",
-        "node-notifier": "^8.0.0",
         "slash": "^3.0.0",
         "source-map": "^0.6.0",
         "string-length": "^4.0.1",
@@ -4639,7 +4639,6 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.1.2",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -6581,8 +6580,7 @@
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
+        "optionator": "^0.8.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -10570,7 +10568,6 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^2.1.2",
         "graceful-fs": "^4.2.4",
         "jest-regex-util": "^26.0.0",
         "jest-serializer": "^26.5.0",
@@ -12008,7 +12005,6 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
       "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
       "dependencies": {
-        "graceful-fs": "^4.1.6",
         "universalify": "^1.0.0"
       },
       "optionalDependencies": {
@@ -15683,7 +15679,6 @@
         "eslint-webpack-plugin": "^2.1.0",
         "file-loader": "6.1.1",
         "fs-extra": "^9.0.1",
-        "fsevents": "^2.1.3",
         "html-webpack-plugin": "4.5.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "26.6.0",
@@ -19298,10 +19293,8 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",
       "integrity": "sha512-aWAgTW4MoSJzZPAicljkO1hsi1oKj/RRq/OJQh2PKI2UKL04c2Bs+MBOB+BBABHTXJpf9mCwHN7ANCvYsvY2sg==",
       "dependencies": {
-        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0",
-        "watchpack-chokidar2": "^2.0.0"
+        "neo-async": "^2.5.0"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -19394,7 +19387,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -19820,7 +19812,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -20342,9 +20333,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -20805,9 +20793,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
diff --git a/src/app.js b/src/app.js
index 3a065d4..f886f48 100644
--- a/src/app.js
+++ b/src/app.js
@@ -7,15 +7,11 @@ import { Home, Profile, ExternalApi } from "./views";
 import ProtectedRoute from "./auth/protected-route";
 
 import "./app.css";
+import Auth0ProviderWithHistory from "./views/auth0Provider";
 
 const App = () => {
-  const { isLoading } = useAuth0();
-
-  if (isLoading) {
-    return <Loading />;
-  }
-
   return (
+    <Auth0ProviderWithHistory>
     <div id="app" className="d-flex flex-column h-100">
       <NavBar />
       <div className="container flex-grow-1">
@@ -27,7 +23,8 @@ const App = () => {
       </div>
       <Footer />
     </div>
+    </Auth0ProviderWithHistory>
   );
-};
+}; 
 
 export default App;
diff --git a/src/components/main-nav.js b/src/components/main-nav.js
index c9bb6dd..42420f3 100644
--- a/src/components/main-nav.js
+++ b/src/components/main-nav.js
@@ -1,7 +1,12 @@
 import {NavLink} from "react-router-dom";
 import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+import LoginButton from "./login-button";
+import LogoutButton from "./logout-button";
 
-const MainNav = () => (
+const MainNav = () => {
+const {loginWithRedirect,logout,user,isLoading} = useAuth0();
+return (
   <div className="navbar-nav mr-auto">
     <NavLink
       to="/"
@@ -27,7 +32,10 @@ const MainNav = () => (
     >
       External API
     </NavLink>
+    
+
+
   </div>
-);
+)};
 
 export default MainNav;
diff --git a/src/views/auth0Provider.js b/src/views/auth0Provider.js
new file mode 100644
index 0000000..a8451d8
--- /dev/null
+++ b/src/views/auth0Provider.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Auth0Provider } from '@auth0/auth0-react';
+
+const Auth0ProviderWithHistory = ({ children }) => {
+  const domain = process.env.REACT_APP_AUTH0_DOMAIN;
+  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
+
+  const history = useHistory();
+
+  const onRedirectCallback = (appState) => {
+    history.push(appState?.returnTo || window.location.pathname);
+  };
+
+  return (  
+    <Auth0Provider
+      domain={domain}
+      clientId={clientId}
+      redirectUri={window.location.origin}
+      onRedirectCallback={onRedirectCallback}
+    >
+      {children}
+    </Auth0Provider>
+  );
+};
+
+export default Auth0ProviderWithHistory;
\ No newline at end of file