React (#247) @Franpastoragusti

Thanks to @Franpastoragusti for the amazing app https://github.com/Franpastoragusti/oidc-react-app
ivanpaulovich · Nov 1, 2020 · 3f7021e · 3f7021e
1 parent 381fd74
commit 3f7021e
Show file tree

Hide file tree

Showing 34 changed files with 637 additions and 471 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,8 +5,8 @@
   "version": "0.2.0",
   "compounds": [
     {
-      "name": "Identity Server & Accounts API & SPA",
-      "configurations": ["Accounts API", "Identity Server", "SPA"]
+      "name": "Solution",
+      "configurations": ["Accounts API", "Identity Server", "Start SPA", "Debug SPA"]
     }
   ],
   "configurations": [
@@ -30,7 +30,7 @@
         "ASPNETCORE_URLS": "https://localhost:5000",
         "ASPNETCORE_HTTPS_PORT": "5000",
         "IDENTITY_SERVER_ORIGIN": "https://localhost:5000",
-        "RedirectUris": "https://localhost:5002/callback",
+        "RedirectUris": "https://localhost:5002/signin-oidc",
         "PostLogoutRedirectUris": "https://localhost:5002",
         "AllowedCorsOrigins": "https://localhost:5002"
       },
@@ -65,7 +65,7 @@
       }
     },
     {
-      "name": "SPA",
+      "name": "Start SPA",
       "type": "node",
       "request": "launch",
       "cwd": "${workspaceFolder}/wallet-spa",
@@ -77,7 +77,8 @@
       "request": "launch",
       "name": "Debug SPA",
       "url": "https://localhost:5002",
-      "webRoot": "${workspaceFolder}/wallet-spa"
+      "webRoot": "${workspaceFolder}/wallet-spa",
+      "runtimeExecutable": "canary"
     },
     {
       "name": "Accounts API (Docker)",

diff --git a/wallet-spa/.env.localhost b/wallet-spa/.env.localhost
@@ -1,6 +1,14 @@
-REACT_APP_AUTHORITY=https://localhost:5000
-REACT_APP_REDIRECT_URI=https://localhost:5002/callback
-REACT_APP_POST_LOGOUT_REDIRECT_URI=https://localhost:5002
-REACT_APP_ACCOUNTS_API=https://localhost:5001
 HTTPS=true
 PORT=5002
+REACT_APP_ACCOUNTS_API=https://localhost:5001
+REACT_APP_AUDIENCE=https://localhost:5000
+REACT_APP_AUTH_URL=https://localhost:5000
+REACT_APP_AUTHORITY=https://localhost:5000
+REACT_APP_IDENTITY_CLIENT_ID=spa
+REACT_APP_ISSUER=https://localhost:5000
+REACT_APP_LOGOFF_REDIRECT_URL=https://localhost:5002/logout
+REACT_APP_POST_LOGOUT_REDIRECT_URI=https://localhost:5002/logout/callback
+REACT_APP_REDIRECT_URI=https://localhost:5002/signin-oidc
+REACT_APP_REDIRECT_URL=https://localhost:5002/signin-oidc
+REACT_APP_SCOPE=openid profile api1.full_access
+REACT_APP_SILENT_REDIRECT_URL=https://localhost:5002/silentrenew
diff --git a/wallet-spa/src/App.jsx b/wallet-spa/src/App.jsx
@@ -1,18 +1,14 @@
-import "./App.css";
-import React from "react";
-import { Component } from "react";
-import Layout from "./components/Layout";
+import React, { Component } from "react";
+import { AuthProvider } from "./providers/authProvider";
+import { BrowserRouter } from "react-router-dom";
+import { Routes } from "./routes/routes";
 
 export default class App extends Component {
-  static displayName = App.name;
-
-  constructor(props) {
-    super(props)
-  }
-
   render() {
     return (
-      <Layout openIdManager={this.props.openIdManager}/>
+      <AuthProvider>
+        <BrowserRouter children={Routes} basename={"/"} />
+      </AuthProvider>
     )
   };
 }
diff --git a/wallet-spa/src/App.test.js b/wallet-spa/src/App.test.js
diff --git a/wallet-spa/src/components/Header.jsx b/wallet-spa/src/components/Header.jsx
@@ -95,10 +95,6 @@ const styles = (theme) => ({
 
 class Header extends React.Component {
 
-  constructor(props) {
-    super(props)
-  }
-
   render() {
 
     const { handleChangeNavDrawer, navDrawerOpen, classes } = this.props

diff --git a/wallet-spa/src/components/Layout.jsx b/wallet-spa/src/components/Layout.jsx
@@ -6,7 +6,7 @@ import SideMenu from "../components/SideMenu";
 import Footer from "../components/Footer";
 import MainContent from "../components/MainContent";
 import { ThemeProvider } from "@material-ui/core/styles";
-import defaultTheme, { customTheme } from "../theme";
+import defaultTheme from "../theme";
 import classNames from "classnames";
 
 const styles = () => ({
@@ -69,10 +69,9 @@ class Layout extends React.Component {
     return (
       <ThemeProvider theme={theme}>
         <Header handleChangeNavDrawer={this.handleChangeNavDrawer} navDrawerOpen={navDrawerOpen} />
-        <SideMenu openIdManager={this.props.openIdManager} navDrawerOpen={navDrawerOpen}
-          handleChangeNavDrawer={this.handleChangeNavDrawer} />
+        <SideMenu navDrawerOpen={navDrawerOpen} handleChangeNavDrawer={this.handleChangeNavDrawer} />
         <div className={classNames(classes.container, !navDrawerOpen && classes.containerFull)}>
-          <MainContent openIdManager={this.props.openIdManager} />
+          <MainContent />
         </div>
         <Footer />
       </ThemeProvider>

diff --git a/wallet-spa/src/components/MainContent.jsx b/wallet-spa/src/components/MainContent.jsx
@@ -6,7 +6,6 @@ import {
 import { Container } from 'reactstrap';
 import Accounts from "../pages/Accounts";
 import Account from "../pages/Account";
-import { AuthCallback } from "../pages/AuthCallback";
 import OpenAccount from "../pages/OpenAccount";
 import Deposit from "../pages/Deposit";
 import Withdraw from "../pages/Withdraw";
@@ -41,68 +40,17 @@ const styles = theme => ({
 });
 
 class MainContent extends Component {
-  constructor(props) {
-    super(props);
-  }
 
   render() {
     return (
       <Container>
-          <Route
-            exact
-            path="/OpenAccount"
-            render={() => {
-              return <OpenAccount openIdManager={this.props.openIdManager} />;
-            }}
-          />
-          <Route
-            exact
-            path="/"
-            render={() => {
-              return <Accounts openIdManager={this.props.openIdManager} />;
-            }}
-          />
-          <Route
-            exact
-            path="/accounts/:accountId/close"
-            render={() => {
-              return <CloseAccount openIdManager={this.props.openIdManager} />;
-            }}
-          />
-          <Route
-            exact
-            path="/accounts/:accountId/transfer"
-            render={() => {
-              return <Transfer openIdManager={this.props.openIdManager} />;
-            }}
-          />
-          <Route
-            exact
-            path="/accounts/:accountId/deposit"
-            render={() => {
-              return <Deposit openIdManager={this.props.openIdManager} />;
-            }}
-          />
-          <Route
-            exact
-            path="/accounts/:accountId/withdraw"
-            render={() => {
-              return <Withdraw openIdManager={this.props.openIdManager} />;
-            }}
-          />
-          <Route
-            exact
-            path="/accounts/:accountId"
-            render={() => {
-              return <Account openIdManager={this.props.openIdManager} />;
-            }}
-          />
-          <Route
-            path="/callback"
-            render={() => {
-              return <AuthCallback />;
-            }}
-          />
+          <Route exact={true} path="/dashboard/openaccount" component={OpenAccount} />
+          <Route exact={true} path="/dashboard/accounts/:accountId/close" component={CloseAccount} />
+          <Route exact={true} path="/dashboard/accounts/:accountId/transfer" component={Transfer} />
+          <Route exact={true} path="/dashboard/accounts/:accountId/deposit" component={Deposit} />
+          <Route exact={true} path="/dashboard/accounts/:accountId/withdraw" component={Withdraw} />
+          <Route exact={true} path="/dashboard/accounts/:accountId" component={Account} />
+          <Route exact={true} path="/dashboard" component={Accounts} />
         </Container>
     )
   }

diff --git a/wallet-spa/src/components/SideMenu.jsx b/wallet-spa/src/components/SideMenu.jsx
@@ -4,16 +4,15 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
-import AccountCircle from "@material-ui/icons/AccountCircle";
-import HomeIcon from '@material-ui/icons/Home';
 import AccountBalanceIcon from '@material-ui/icons/AccountBalance';
 import ExitToApp from "@material-ui/icons/ExitToApp";
 import AddIcon from '@material-ui/icons/Add';
 import { Avatar } from "@material-ui/core";
-import { Grid } from "@material-ui/core";
 import { withStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import { fade } from "@material-ui/core/styles/colorManipulator";
+import { AuthConsumer } from "../providers/authProvider"
+import AuthService from "../store/authService";
 
 const drawStyles = theme => {
   return {
@@ -80,17 +79,6 @@ const drawStyles = theme => {
       color: "white",
       boxShadow: "rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px"
     },
-    menuItem: {
-      padding: "10px 16px",
-      color: "white",
-      fontSize: 14,
-      "&:focus": {
-        backgroundColor: theme.palette.primary.main,
-        "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
-          color: theme.palette.common.white
-        }
-      }
-    },
     miniMenuItem: {
       color: "white",
       margin: "10px 0",
@@ -114,102 +102,79 @@ const drawStyles = theme => {
 };
 
 class SideMenu extends Component {
+
+  authService;
+
   constructor(props) {
     super(props);
 
     this.state = {
-      isLoggedIn: false,
-      user: null
+      user: {
+        profile: {
+          name: ""
+        }
+      }
     }
 
-    this.performLogin = this.performLogin.bind(this);
-    this.performLogout = this.performLogout.bind(this);
+    this.authService = new AuthService();
   }
 
   componentDidMount() {
-    this.props.openIdManager.getUser().then((user) => {
-      if (user) {
-        this.setState({ isLoggedIn: true, user: user });
-      } else {
-        this.setState({ isLoggedIn: false, user: null });
-      }
-    });
+    this.authService
+      .getUser()
+      .then((user) => {
+        this.setState({ user: user });
+      });
   }
 
   render() {
-    const { user } = this.state;
-    const { classes, navDrawerOpen, handleChangeNavDrawer } = this.props;
+    const { classes, navDrawerOpen } = this.props;
     return (
       <div>
         <Drawer
           open={navDrawerOpen}
           variant="permanent"
           classes={{
             paper: classNames(classes.drawerPaper, !navDrawerOpen && classes.drawerPaperClose)
-          }}
-        >
-
+          }} >
           <div>
             <div className={classes.logo}>My Wallet</div>
-            {this.state.isLoggedIn && <div className={classNames(classes.avatarRoot, !navDrawerOpen && classes.avatarRootMini)}>
+            <div className={classNames(classes.avatarRoot, !navDrawerOpen && classes.avatarRootMini)}>
               <Avatar size={navDrawerOpen ? 48 : 32} classes={{ root: classes.avatarIcon }} />
-              <span className={classes.avatarSpan}>{user.profile.name}</span>
-            </div>}
+              <span className={classes.avatarSpan}>{this.state.user.profile.name}</span>
+            </div>
             <List>
-              {this.state.isLoggedIn ? this.renderWhenTrue() : this.renderWhenFalse()}
+              <ListItem button component="a" href="/Dashboard">
+                <ListItemIcon style={{ color: "white" }}>
+                  <AccountBalanceIcon />
+                </ListItemIcon>
+                <ListItemText primary="My Accounts" />
+              </ListItem>
+              <ListItem button component="a" href="/Dashboard/OpenAccount">
+                <ListItemIcon style={{ color: "white" }}>
+                  <AddIcon />
+                </ListItemIcon>
+                <ListItemText primary="Open an Account" />
+              </ListItem>
+              <ListItem button>
+                <ListItemIcon style={{ color: "white" }}>
+                  <ExitToApp />
+                </ListItemIcon>
+                <AuthConsumer>
+                  {({ logout }) => {
+                    return (
+                      <ListItemText primary="Sign Out" onClick={logout} />
+                    );
+                  }}
+                </AuthConsumer>
+              </ListItem>
             </List>
           </div>
 
         </Drawer>
       </div>
     );
   }
-
-  renderWhenTrue() {
-    return (
-      <React.Fragment>
-        <ListItem button component="a" href="/">
-          <ListItemIcon style={{ color: "white" }}>
-            <AccountBalanceIcon />
-          </ListItemIcon>
-          <ListItemText primary="My Accounts" />
-        </ListItem>
-        <ListItem button component="a" href="/OpenAccount">
-          <ListItemIcon style={{ color: "white" }}>
-            <AddIcon />
-          </ListItemIcon>
-          <ListItemText primary="Open an Account" />
-        </ListItem>
-        <ListItem button>
-          <ListItemIcon style={{ color: "white" }}>
-            <ExitToApp />
-          </ListItemIcon>
-          <ListItemText primary="Sign Out" onClick={this.performLogout} />
-        </ListItem>
-      </React.Fragment>
-    )
-  }
-
-  renderWhenFalse() {
-    return (
-      <React.Fragment>
-        <ListItem button>
-          <ListItemIcon style={{ color: "white" }}>
-            <AccountCircle />
-          </ListItemIcon>
-          <ListItemText primary="Sign In" onClick={this.performLogin} />
-        </ListItem>
-      </React.Fragment>
-    )
-  }
-
-  performLogin() {
-    this.props.openIdManager.signinRedirect();
-  }
-
-  performLogout() {
-    this.props.openIdManager.signoutRedirect();
-  }
 }
 
 export default withStyles(drawStyles, { withTheme: true })(SideMenu);