Okta-React "auth" Prop is Undefined

Questions
1

I followed the example for creating a custom login page and got that working successfully. All of my routes, excluding the login page, are secure and I am placing a logout button in my site header component to allow users to logout if they wish.
My problem is the “auth” prop is undefined in my header component even though I have included the line import { withAuth } from "@okta/okta-react". I have included the relevant code below;

App.js
import React from “react”;
import { CookiesProvider } from “react-cookie”;

import "../node_modules/bootstrap/dist/css/bootstrap.css";
import "./App.css";

import SiteHeader from "./components/common/siteHeaderComponent.jsx";
import Routes from "./routes"

const App = () => (
	<div>
		<CookiesProvider>
			<SiteHeader />
			<Routes />
		</CookiesProvider>
	</div>
)

export default App;

siteHeaderComponent.jsx
import React, { Component } from “react”;
import PropTypes from “prop-types”;
import { connect } from “react-redux”;
import { bindActionCreators } from “redux”;
import { Navbar, NavbarBrand, Nav, NavItem, NavDropdown, MenuItem } from “react-bootstrap”;
import { withCookies } from “react-cookie”;
import { withAuth } from “@okta/okta-react”;

import * as loginActions from "../../actions/loginActions";

class SiteHeader extends Component {
	constructor(props) {
		super(props);
		this.state = { authenticated: false, navigateTo: null };
		this.checkAuthentication = this.checkAuthentication.bind(this);
		this.getSessionData = this.getSessionData.bind(this);
		this.logoutUser = this.logoutUser.bind(this);
	}

	async componentDidMount() {
		await this.getSessionData();
		await this.checkAuthentication();
	}

	async componentWillReceiveProps() {
		await this.getSessionData();
		await this.checkAuthentication();
	}

	checkAuthentication() {
		if (this.props.userSession) {
			if (!this.state.authenticated) { 
				this.setState({ authenticated: true });
			}
		}
		else {
			if (this.state.authenticated) {
				this.setState({ authenticated: false });
			}
		}
	}

	getSessionData() {
		if (!this.props.userSession) {
			const { cookies } = this.props;
			const userSession = cookies.get("pwttSession") || {};

			if (userSession.expiresAt) {
				const user = Object.assign(
					{},
					{ expiresAt: userSession.expiresAt },
					{ accessToken: userSession.accessToken },
					{ sessionToken: userSession.sessionToken },
					{ user: userSession.user }
				);

				this.props.loginActions.userLoggedIn(user);
			}
		}
	}

	logoutUser() {
		this.props.auth.logout();
		this.setState({ authenticated: false });
		this.props.loginActions.userLoggedOut();
	}

	render() {
		if (this.state.authenticated) {
			const logoutBtn = <button className="btn btn-default" style={{ marginRight: "10px", marginTop: "8px" }} onClick={this.logoutUser}>Logout</button>;

			return (
				<span>
					...
				</span>
			)
		}
		else {
			return (
				<span>
					...
				</span>
			)
		}
	}
}

SiteHeader.propTypes = {
	userSession: PropTypes.object,
	loginActions: PropTypes.object.isRequired
};

function mapStoreStateToProps(state, ownProps) {
	return {
		userSession: state.UserSession,
	};
}

function mapDispatchToProps(dispatch) {
	return {
		loginActions: bindActionCreators(loginActions, dispatch),
	};
}

export default connect(mapStoreStateToProps, mapDispatchToProps)(withAuth(withCookies(SiteHeader)));

If I examine the props in the constructor i get;

SiteHeader {userSession: null, loginActions: {…}, auth: undefined, cookies: Cookies}

2

Any ideas here @jmelberg?

3

I guess because SiteHeader component is not wrapped with Router. @okta/okta-react is working only through the Router.