feat(auth0) add Profile page and update React Router to version v6
This commit is contained in:
parent
4df4ed66bc
commit
d3249b4280
|
@ -13,3 +13,4 @@
|
||||||
* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
|
* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
|
||||||
* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
|
* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
|
||||||
* [Auth0 with React}(https://auth0.com/blog/complete-guide-to-react-user-authentication/)
|
* [Auth0 with React}(https://auth0.com/blog/complete-guide-to-react-user-authentication/)
|
||||||
|
* [React/JavaScript +React Router 6: Authentication Code Sample](https://auth0.com/developers/hub/code-samples/spa/react-javascript/basic-authentication-with-react-router-6)
|
|
@ -1,25 +1,29 @@
|
||||||
import React from 'react';
|
import React, {Fragment} from 'react';
|
||||||
import { Route, Routes } from "react-router-dom";
|
import { Route, Routes} from 'react-router-dom';
|
||||||
import { useAuth0 } from '@auth0/auth0-react';
|
import { useAuth0 } from '@auth0/auth0-react';
|
||||||
|
|
||||||
import NavBar from "./components/nav-bar";
|
import NavBar from "./components/nav-bar";
|
||||||
import Loading from "./components/loading";
|
import Loading from "./components/loading";
|
||||||
import Profile from "./pages/profile";
|
import Profile from "./pages/profile";
|
||||||
import Home from './pages/home';
|
import Home from './pages/home';
|
||||||
|
import ProtectedRoute from './auth/protected-route';
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const { isLoading } = useAuth0();
|
const { isLoading } = useAuth0();
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return <Loading />;
|
return <Loading />;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div>
|
<Fragment>
|
||||||
<NavBar />
|
<NavBar/>
|
||||||
<div>
|
<Routes>
|
||||||
<Routes>
|
<Route
|
||||||
<Route path="/" element={<Home/>} />
|
path="/"
|
||||||
<Route path="/profile" element={<Profile/>} />
|
element={<Home/>} />
|
||||||
</Routes>
|
<Route
|
||||||
</div>
|
path="/profile"
|
||||||
</div>
|
element={<ProtectedRoute component={Profile} />}
|
||||||
|
/>
|
||||||
|
</Routes>
|
||||||
|
</Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { withAuthenticationRequired } from "@auth0/auth0-react";
|
||||||
|
import React from "react";
|
||||||
|
import Loading from "../components/loading";
|
||||||
|
const ProtectedRoute = ({ component }) => {
|
||||||
|
const Component = withAuthenticationRequired(component, {
|
||||||
|
onRedirecting: () => <Loading />,
|
||||||
|
});
|
||||||
|
|
||||||
|
return <Component />;
|
||||||
|
};
|
||||||
|
export default ProtectedRoute;
|
|
@ -1,7 +1,8 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
|
||||||
import App from './app';
|
import App from './app';
|
||||||
import { BrowserRouter as Router } from "react-router-dom";
|
|
||||||
import Auth0ProviderWithHistory from './auth/auth0-provider-with-history';
|
import Auth0ProviderWithHistory from './auth/auth0-provider-with-history';
|
||||||
//TODO remove debugging
|
//TODO remove debugging
|
||||||
if (process.env.NODE_ENV !== 'production') {
|
if (process.env.NODE_ENV !== 'production') {
|
||||||
|
@ -13,9 +14,11 @@ import { createRoot } from 'react-dom/client';
|
||||||
const root = createRoot(document.getElementById("root"));
|
const root = createRoot(document.getElementById("root"));
|
||||||
//render root app
|
//render root app
|
||||||
root.render(
|
root.render(
|
||||||
<Router>
|
<React.StrictMode>
|
||||||
<Auth0ProviderWithHistory>
|
<BrowserRouter>
|
||||||
<App />
|
<Auth0ProviderWithHistory>
|
||||||
</Auth0ProviderWithHistory>
|
<App />
|
||||||
</Router>,
|
</Auth0ProviderWithHistory>
|
||||||
|
</BrowserRouter>
|
||||||
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { useAuth0, withAuthenticationRequired } from '@auth0/auth0-react';
|
import { useAuth0 } from '@auth0/auth0-react';
|
||||||
import Loading from '../components/loading';
|
import Loading from '../components/loading';
|
||||||
|
|
||||||
const Profile = () => {
|
const Profile = () => {
|
||||||
|
@ -29,6 +29,4 @@ const Profile = () => {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default withAuthenticationRequired(Profile, {
|
export default Profile;
|
||||||
onRedirecting: () => <Loading />,
|
|
||||||
});
|
|
||||||
|
|
Loading…
Reference in New Issue