React withAuth passing undefined for auth prop

Questions
1

I am trying to port the front end of our React application today. But the withAuth component wrapper does not seem to be passing the ‘auth’ object as a prop. It is undefined.

Here is my application container:

import React, { Component, PropTypes } from ‘react’;
import { Route, Router } from ‘react-router’;
import { Provider } from ‘react-redux’;
import { Security, ImplicitCallback } from ‘@okta/okta-react’;
import { config } from ‘…/modules/auth’;
import TestView from ‘…/routes/Test/TestView’;

var $ = require(‘jquery’);

class AppContainer extends Component {
static propTypes = {
routes : PropTypes.object.isRequired,
store : PropTypes.object.isRequired
}

shouldComponentUpdate () {
return false
}

render () {
const { store, history } = this .props

return (
<Provider store={store}>
<div style={{ height: ‘100%’ }}>
<Router history={history}>
<Security issuer={config.issuer} client_id={config.client_id} redirect_uri={config.redirect_uri}>
<Route path=’/’ exact={ true } component={TestView} store={store} />
<Route path=’/implicit/callback’ component={ImplicitCallback}/>
</Security>
</Router>
</div>
</Provider>
)
}
}

export default AppContainer

And here is the test component:

import React, { Component } from ‘react’;
import { connect } from ‘react-redux’;
import { withAuth } from ‘@okta/okta-react’;

var $ = require(‘jquery’);

const mapStateToProps = (state) => {
}
const mapDispatchToProps = {
}

class TestView extends Component {
constructor(props) {
super (props);
if (!props.auth){
console.log(‘auth not provided’);
}
this .state = { authenticated: null };
this .checkAuthentication = this .checkAuthentication.bind( this );
this .checkAuthentication();
this .login = this .login.bind( this );
this .logout = this .logout.bind( this );
}

async checkAuthentication() {
const authenticated = await this .props.auth.isAuthenticated();
if (authenticated !== this .state.authenticated) {
this .setState({ authenticated });
}
}

componentDidUpdate() {
this .checkAuthentication();
}

async login() {
// Redirect to ‘/’ after login
this .props.auth.login(’/’);
}

async logout() {
// Redirect to ‘/’ after logout
this .props.auth.logout(’/’);
}

render() {
if ( this .state.authenticated === null ) return null ;
const button = this .state.authenticated ?
<button onClick={ this .logout}>Logout</button> :
<button onClick={ this .login}>Login</button>;

return <div>
<h1>This is the test view.</h1>
<div>
{{button}}
</div>
</div>;
}
}

// export default connect(mapStateToProps, mapDispatchToProps)(withAuth(TestView));
export default withAuth(TestView);

Because it is an older app, I am integrating with it is using some older versions: React 15, React-Router 2.8, and React-Router-Redux 4. Would that make a difference?

2

Does withAuth only work with react-router-dom? Or should it work with React-Router 3? This is issue is holding up production for us.

3

It seems that if I go to react-router-dom (v4) then the props get passed correctly. I think the docs and the requirements for @okta/okta-react should be updated to reflect this.

4

Can you please enter an issue for the React SDK to request this change?

5

I have submitted an issue to github.

6

I think what’s going on here is that your auth object is getting appended to the child objects contained inside your <Security> tag. If you want them to propagate further you need to explicitly add a auth={this.props.auth} to the grandchildren and so on of the <Security> tag. That, and you should likely be importing {BrowserRouter as Router, Route} from react-router-dom;
Also, why on earth are you importing Jquery? You don’t ever traverse the dom with React. I