Matt Raible
Thanks for reporting the issues you’re having with this tutorial Alexandre. If you’re using the same versions we specify in the tutorial, then it sounds like there’s a bug. If you’re trying to use new versions, or install dependencies w/o version numbers, things will likely break.
If you want to try working with the versions used in this blog post, a shortcut is to clone the example app, change the Okta settings to use yours, then run it.
Dale Mc Diarmid
Do you have equivalent guides for SAML integration?
Novajed
Hey there! Dev who recently followed this article. Learned that there’s a few things to migrate in order to do this in 2020. This README addresses everything so people can get up and running. Hope it helps!
Arlety Delgado
Hey! I’m very new to React, so I’m finding it difficult to know what needs to be changed. Could you please post what needs to be changed? Thank you!
Eloise Zeng
Hello,
How can I add new columns to the database table? In index.js, I replaced
const Post = database.define(‘posts’, {
title: Sequelize.STRING,
email: Sequelize.STRING,
});
with
const Post = database.define(‘posts’, {
title: Sequelize.STRING,
email: Sequelize.STRING,
});
Then in PostEditor.js, I replaced
<field name=“body”>
{({ input }) => (
<textfield classname="{classes.marginTop}" label=“Body” autofocus="" {…input}=""/>
)}
</field>
with
<field name=“email”>
{({ input }) => (
<textfield classname="{classes.marginTop}" label=“Body” autofocus="" {…input}=""/>
)}
</field>
I got the error SQLITE_ERROR: no such column: email in the console.
Thanks in advance
Conor Macken
@minoation thanks for this comment, made me aware of the need to migrate.
For anyone going through this tutorial in 2020 here’s a commit with the updates you need to do to make this work with okta-react version 3
Graham Charles
This line in LoginButton.js causes not-a-function errors:
const authenticated = await this.props.authState.isAuthenticated();
As far as I can tell, it should be a property:
const authenticated = await this.props.authState.isAuthenticated;
Maybe it’s a version thing?
Ibrahim Bhabay
This article is kind of confusing. Bradley has created the application for Authorization code flow, but ended up implementing implicit flow. This is because the authorization is happening through redirect uri on react side and then the access code is sent to node server to access the API. I think this is quite misleading! Could you please show how to serve an SPA using Authorization code flow.
Matt Raible
Are you using @okta/okta-react@3.0.8 like this tutorial recommends? If so, it might be a bug and we should fix it. If not, I recommend looking for a newer article, like A Quick Guide to React Login Options. You can find all our React articles by going to the react tag.
Matt Raible
This post is a couple years old, so it’s possible things have changed. I searched and don’t see the word “implicit” mentioned in this article. What makes you think it uses implicit flow?
USS Cognizant
Hi, On MacOS 10.14.6 (18G6032), getting to Login page and logging in with Okta was quick. But the POSTS-MANAGER link gives an empty page (with just the header). No errors on Chrome-console and Shell-console, whatsoever. Tried with both yarn start as well as npm start. I suspect something IS BROKEN with the React-code. Chrome-Console NETWORK tab shows only Okta traffic. Nothing sent to localhost:3001. I tried running npm run start;web and npm run watch:server separately. Same exact behavior! Other REACT-Code issues: After login, I do NOT see the “human icon”. Help!
Matt Raible
Are you using the same version numbers this tutorial is using? If so, you might try comparing your code with the example’s code. https://github.com/oktadeve…
USS Cognizant
Yessir. The exact commands as on github README.md (so … there not anything in those commands to specify as versions. All versions are actually in package.json); The only unspecified items are Node.JS version (I used v10 and v14). And neither of these 2 Node.JS versions made any difference. As such, I’m not great at React.js. To compound it, the use of epilogue makes it hard for me to debug it myself. Worst of all, no errors or warnings in Chrome console!
nemesisnz
Nice tutorial. But unfortunately the Okta portion doesn’t work.
I have gone through the steps to the section on adding the login/logout link. Including the process of signing up with Okta. The login link in the app displays fine. Clicking on it shows me an Okta login prompt. Logging in using my original credentials sends me back to the app, but no logged in state is displayed and it’s easy to see why. Even found in the final github repo.
authenticated is always null. Removing this line displays the login link again. Seems to me that the block returning the menu can never run.
Is this tutorial outdated? The repo seems to have been updated regularly.
USS Cognizant
UPDATE: I gave up on this app. I tried another app from Okta’s sample repo; This time I went with ANOTHER REACT.js app (w/ Spring API backend), that worked JUST FINE. Took me less than 3 minutes! Clearly the ABOVE app’s REACT.js code wont work on a Mac. Something’s broken inside in the REACT.js code.
FYI: This works → https://github.com/oktadeveloper/okta-spring-boot-react-crud-example
Matt Raible
I’m pretty sure this tutorial works if you use the commands and versions specified. I updated it a couple of times to fix bugs myself. I’m glad you found another one that works for you!
Vinicius Feitosa
Great article.
If you are having trouble obtaining the token, within the file src/pages/PostsManager.js the correct one would be :
authorization: Bearer ${await this.props.authService.getAccessToken()}
https://media3.giphy.com/me…
Ajarn Nelson
isAuthticated is not working. I keep getting its undefined. How do I define it?
Matt Raible
Are you using the same library versions this post uses? If you are, you might try comparing your code with this blog post’s example app on GitHub.
xingvoong
I tried to log in to the app but my username and password are not working.
I tried to reset it but it does not work either 
