Okta React Sample does not work

Questions
1

I am following the guide at

I have followed this as closely as I can, but I am hitting a problem when I click on the ‘login’ button in the Home component.

I am getting a Javascript error on the call to Auth.login

stringify.js:4 Uncaught (in promise) TypeError: Converting circular structure to JSON
at Object.stringify ()
at stringify (stringify.js:4)
at Auth._callee6$ (Auth.js:340)
at tryCatch (runtime.js:62)
at Generator.invoke [as _invoke] (runtime.js:296)
at Generator.prototype.(:3000/anonymous function) [as next] (http://localhost:3000/static/js/bundle.js:44962:21)
at step (asyncToGenerator.js:17)
at asyncToGenerator.js:35
at new Promise ()
at new F (_export.js:36)
at Auth. (asyncToGenerator.js:14)
at Auth.login (Auth.js:364)
at HTMLUnknownElement.callCallback (react-dom.development.js:145)
at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
at invokeGuardedCallback (react-dom.development.js:248)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:262)
at executeDispatch (react-dom.development.js:593)
at executeDispatchesInOrder (react-dom.development.js:615)
at executeDispatchesAndRelease (react-dom.development.js:713)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:724)
at forEachAccumulated (react-dom.development.js:694)
at runEventsInBatch (react-dom.development.js:855)
at runExtractedEventsInBatch (react-dom.development.js:864)
at handleTopLevel (react-dom.development.js:4857)
at batchedUpdates$1 (react-dom.development.js:17498)
at batchedUpdates (react-dom.development.js:2189)
at dispatchEvent (react-dom.development.js:4936)
at interactiveUpdates$1 (react-dom.development.js:17553)
at interactiveUpdates (react-dom.development.js:2208)
at dispatchInteractiveEvent (react-dom.development.js:4913)

2

Here’s an example from one of our blog posts. I think you need to use await on login/logout methods or you need onClick={() => this.props.auth.login()}.

import * as React from 'react';
import './App.css';
import BeerList from './BeerList';
import { withAuth } from '@okta/okta-react';
import { Auth } from './App';

import logo from './logo.svg';

interface HomeProps {
  auth: Auth;
}

interface HomeState {
  authenticated: boolean;
}

export default withAuth(class Home extends React.Component<HomeProps, HomeState> {
  constructor(props: HomeProps) {
    super(props);
    this.state = {authenticated: false};
    this.checkAuthentication = this.checkAuthentication.bind(this);
    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 });
    }
  }

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

  async componentDidUpdate() {
    await this.checkAuthentication();
  }

  async login() {
    this.props.auth.login('/')
  }

  async logout() {
    this.props.auth.logout('/');
  }

  render() {
    const {authenticated} = this.state;
    let body = null;
    if (authenticated) {
      body = (
        <div className='Buttons'>
          <button onClick={this.logout}>Logout</button>
          <BeerList auth={this.props.auth}/>
        </div>
      );
    } else {
      body = (
        <div className='Buttons'>
          <button onClick={this.login}>Login</button>
        </div>
      );
    }

    return (
      <div className='App'>
        <header className='App-header'>
          <img src={logo} className='App-logo' alt='logo'/>
          <h1 className='App-title'>Welcome to React</h1>
        </header>
        {body}
      </div>
    );
  }
});
3

Thanks for that, the arrow function fixes the issue.

I guess I was also wanting to point out that the sample code does not work ‘out of the box’ and was wondering if the sample code could be fixed to save confusion and time for future users of the site.

Do you know the best way to report a problem like this to whoever maintains the Okta site?

The page is here

https://developer.okta.com/code/react/okta_react

Its the code for src/Home.js that is wrong

4

You can report it as an issue in our GitHub repo for our docs: https://github.com/okta/okta.github.io

The React samples repo is at: https://github.com/okta/samples-js-react

5

Thanks for that I’ll report it later.

6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.