React <SecuredRoute .../> not returning this.props - reactjs

Question

My components are displayed with data from the server if the route isn't secured. As soon as I secure the route, this.props returns undefined.
App.js
import React, { Component } from 'react';
import {Route, withRouter} from 'react-router-dom';
import auth0Client from './Auth/Auth';
import NavBar from './NavBar/NavBar';
import Callback from './Callback/Callback';
import Customers from './Customers/Customers';
import Customer from './Customer/Customer';
import SecuredRoute from './SecuredRoute/SecuredRoute';
class App extends Component {
constructor(props) {
super(props);
this.state = {
checkingSession: true,
}
}
async componentDidMount() {
if (this.props.location.pathname === '/callback') {
this.setState({checkingSession:false});
return;
}
try {
await auth0Client.silentAuth();
this.forceUpdate();
} catch (err) {
if (err.error !== 'login_required') console.log(err.error);
}
this.setState({checkingSession:false});
}
render() {
return (
<div>
<NavBar/>
<Route exact path='/callback' component={Callback}/>
<SecuredRoute exact path='/customers'
component={CustomersComponent}
checkingSession={this.state.checkingSession}
/>
<SecuredRoute exact path='/customers/:customerId'
component={CustomerComponent}
checkingSession={this.state.checkingSession}
/>
{/*<Route exact path='/customers/:customerId' component={CustomerComponent}/>*/} // this works
</div>
);
}
}
const CustomersComponent = (props) => {
return (
<Customers {...props}
/>
);
}
const CustomerComponent = (props) => {
return (
<Customer {...props}
/>
);
}
export default withRouter(App);
Auth.js
import auth0 from 'auth0-js';
class Auth {
constructor() {
this.auth0 = new auth0.WebAuth({
domain: 'domain.eu.auth0.com',
audience: 'https://domain.eu.auth0.com/userinfo',
clientID: 'clientID',
redirectUri: 'http://localhost:3000/callback',
responseType: 'id_token',
scope: 'openid profile'
});
this.getProfile = this.getProfile.bind(this);
this.handleAuthentication = this.handleAuthentication.bind(this);
this.isAuthenticated = this.isAuthenticated.bind(this);
this.signIn = this.signIn.bind(this);
this.signOut = this.signOut.bind(this);
}
getProfile() {
return this.profile;
}
getIdToken() {
return this.idToken;
}
isAuthenticated() {
return new Date().getTime() < this.expiresAt;
}
signIn() {
this.auth0.authorize();
}
handleAuthentication() {
return new Promise((resolve, reject) => {
this.auth0.parseHash((err, authResult) => {
if (err) return reject(err);
if (!authResult || !authResult.idToken) {
return reject(err);
}
this.setSession(authResult);
resolve();
});
})
}
setSession(authResult) {
this.idToken = authResult.idToken;
this.profile = authResult.idTokenPayload;
// set the time that the id token will expire at
this.expiresAt = authResult.idTokenPayload.exp * 1000;
}
signOut() {
this.auth0.logout({
returnTo: 'http://localhost:3000',
clientID: 'clientID',
});
}
silentAuth() {
return new Promise((resolve, reject) => {
this.auth0.checkSession({}, (err, authResult) => {
if (err) return reject(err);
this.setSession(authResult);
resolve();
});
});
}
}
const auth0Client = new Auth();
export default auth0Client;
Customers.js
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import axios from 'axios';
class Customers extends Component {
constructor(props) {
super(props);
this.state = {
accounts: null,
customers: null
};
}
async componentDidMount() {
const customers = (await axios.get('http://localhost:8081/customers/')).data;
const accounts = (await axios.get('http://localhost:8081/accounts/')).data;
this.setState({
accounts,
customers
});
}
countAccounts(custid) {
const accounts = this.state.accounts;
let count = 0;
accounts.forEach(function(element) {
if (element.CustomerId === custid) {
count = count + 1;
}
});
return count;
}
countOverdueAccounts(custid) {
const accounts = this.state.accounts;
let count = 0;
accounts.forEach(function(element) {
if (element.CustomerId === custid && element.CurrentStatus !== "Active") {
count = count + 1;
}
});
return count;
}
listOfAccounts(custid) {
const accounts = this.state.accounts;
let arr = [];
accounts.forEach(function(element) {
if (element.CustomerId === custid) {
arr.push(<p key={element.id}>{element.AccountNumber}</p>)
}
});
return arr;
}
overdueCard(custid) {
const accounts = this.state.accounts;
let cardTheme = "card text-white bg-primary mb-3";
accounts.forEach(function(element) {
if (element.CustomerId === custid && element.CurrentStatus !== "Active") {
cardTheme = "card text-white bg-danger mb-3";
}
});
return cardTheme;
}
render() {
return (
<div className="container">
<div className="row">
{this.state.customers === null && <p>Loading customer records...</p>}
{
this.state.customers && this.state.customers.map(customer => (
<div key={customer.id} className="col-sm-12 col-md-4 col-lg-3">
<Link to={`/customers/${customer.id}`}>
<div className={this.overdueCard(customer.id)}>
<div className="card-header">
<p>Accounts: {this.countAccounts(customer.id)}</p>
<p>Overdue accounts: {this.countOverdueAccounts(customer.id)}</p>
</div>
<div className="card-body">
<h4 className="card-title">Current status: {customer.CurrentStatus}</h4>
<p className="card-text">{customer.FirstName} {customer.Surname}</p>
<p className="card-text">ID number: {customer.NationalIDNumber}</p>
<p className="card-text">Contact number: {customer.ContactNumber}</p>
<p className="card-text">Email: {customer.EmailAddress}</p>
<div className="card-text">List of accounts:{this.listOfAccounts(customer.id)}</div>
</div>
</div>
</Link>
</div>
))
}
</div>
</div>
)
}
}
export default Customers;
Customer.js
import React, {Component} from 'react';
import axios from 'axios';
import SubmitUpdate from './SubmitUpdate';
import auth0Client from '../Auth/Auth';
class Customer extends Component {
constructor(props) {
super(props);
this.state = {
account: null,
customer: null
};
this.submitUpdate = this.submitUpdate.bind(this);
}
async componentDidMount() {
await this.refreshCollection();
}
async refreshCollection() {
//console.log('this.props: ', this.props);
const { match: { params } } = this.props; // <----- fails here as this.props is not returned
//console.log(`http://localhost:8081/customers/${params.customerId}`);
const customer = (await axios.get(`http://localhost:8081/customers/${params.customerId}`)).data;
const account = (await axios.get(`http://localhost:8081/accounts/${params.customerId}`)).data;
this.setState({
account: account,
customer: customer
});
}
async submitUpdate(update){
await axios.post(`http://localhost:8081/update/${this.state.customer.id}`, {
update,
}, {
headers: { 'Authorization': `Bearer ${auth0Client.getIdToken()}` }
});
await this.refreshCollection();
}
render() {
const {customer} = this.state;
const {account} = this.state;
//console.log('customer: ', customer);
//console.log('account: ', account);
if (customer === null) return <p>Loading... </p>;
return (
<div className="container">
<div className="row">
<div className="jumbotron col-12">
<p className="card-text">{customer[0].FirstName} {customer.Surname}</p>
<p className="card-text">ID number: {customer[0].NationalIDNumber}</p>
<p className="card-text">Contact number: {customer[0].ContactNumber}</p>
<p className="card-text">Email: {customer[0].EmailAddress}</p>
<hr className="my-4" />
<SubmitUpdate accountId={customer.id} submitUpdate={this.submitUpdate} />
<p>Notes</p>
</div>
</div>
</div>
);
}
}
export default Customer;
SecuredRoute.js
import React from 'react';
import {Route} from 'react-router-dom';
import auth0Client from '../Auth/Auth';
function SecuredRoute(props) {
const {component: Component, path, checkingSession} = props;
return (
<Route path={path} render={() => {
if (checkingSession) return <h3 className="text-center">Validating session...</h3>;
if (!auth0Client.isAuthenticated()) {
auth0Client.signIn();
return <div></div>;
}
return <Component />
}} />
);
}
export default SecuredRoute;
Please help me understand what I'm doing wrong. I'm sure it's something simple, I just can't figure it out.

Answer 1

Make sure to pass on the component props as well as your Router props.
Like this
import React from 'react';
import {Route} from 'react-router-dom';
import auth0Client from '../Auth/Auth';
function SecuredRoute(props) {
const {component: Component, path, checkingSession, ...rest} = props;
return (
<Route path={path} render={(routerProps) => { // <---- get the props
if (checkingSession) return <h3 className="text-center">Validating session...</h3>;
if (!auth0Client.isAuthenticated()) {
auth0Client.signIn();
return <div></div>;
}
return <Component {...rest} {...routerProps}/> // <---- include the routerProps
}} />
);
}
export default SecuredRoute;