Simple User Authentication in React

Developer Blog Comments
1

Simple User Authentication in React

Learn the basics of Redux for React.

2

Brian

Is there any way to access the auth object outside of a React component? It seems like an anti-pattern to pass it into every React component that needs to make an api call.

3

Matt Raible

Hello Brian,

For this case, you can create the Auth object outside of React and pass it to the Security component on its props: https://github.com/okta/okt…


this.auth = props.auth || new Auth(props);

4

Daniel Kennedy

This works well on localhost, but on the deployed version (Netlify) I get a 404 for /implicit/callback. What am I doing wrong?

5

Daniel Kennedy

OK, I worked it out: https://www.slightedgecoder…

6

Matt Raible

Thanks for letting us know! Glad you figured it out. :slight_smile:

7

Cicero Wolowski

Hi,

well I’m stuck with my SPA and hashed urls :frowning: I cant make this work

I have my react application that uses hash based url’s (http://localhost:8080/#/login), on my SPA app I have “
http://localhost:8080/implicit/callback” as my callback url. My routes configuration has , so everything in place.

But after provide my credentials (user/pass) on the okta-signin-widget, I have “http://localhost:8080/implicit/callback#/code=rCZxRR9mQ8_VTQHyCMLU&state=fTvGLGXqjx1QenupaZy5dBHzrUbYxjs4DCn6jvYHkIfualK01TqVW” as result of the redirect from OKTA, but this results in a not found, probably because of the hash based url.

I have been walking in circles with this issue, can somebody help-me with ideas on how to solve this?

Thanks,

8

Matt Raible

The OAuth spec requires that only one hash fragment exist. See the following issue for possible workarounds.
https://github.com/okta/okt…

9

Raymond Pugh Jr.

How would you go about connecting the log in to a deployed backend? I can’t seem to modify

login() {
let port = (window.location.port ? ‘:’ + window.location.port : ‘’);
if (port === ‘:3000’) {
port = ‘:8080’;
}
window.location.href = ‘//’ + window.location.hostname + port + ‘/private’;
}
 in any way that will work.

10

Matt Raible

I don’t see any reference to “/private” in this post. Another React post I wrote has it. Did you mean to post this comment there?

11

Barnett

I was hopeful that this tutorial would be beginner friendly. Alas, it is not.

For example:
1) “withAuth” throws a type error and Okta’s docs currently say to use "withOktaAuth"
2) Abstracting to auth.js doesn’t work per the above as auth is undefined

:frowning: Hopefully Firebase is more beginner friendly

12

Matt Raible

Hello Barnett. If you use @okta/okta-react v1.2.0 as specified in this tutorial, everything should work as expected. :slightly_smiling_face:

13

munawar

Hi when i tried to integrate widget in react webpack app, i am getting following error. please help me out

./node_modules/@okta/okta-signin-widget/dist/img/icons/mfa/u2f_70x70.png 1:0
Module parse failed: Unexpected character ‘�’ (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/conc…
(Source code omitted for this binary file)

14

adi

i’m having an error in Login.js ,it says that status is undefined

15

Matt Raible

If you’re using the same library versions that are used in this post, everything should work. If you’re still having issued, I’d recommend using the updated tutorial referenced at the top of this one.