OpenID Connect /Node /React

user_11603057 0
Viewed 5626

There is a lot of examples how to implement OpenID Connect auth. in Node - code grant (+ client password). There is a lot of examples how to implement OpenID in React (SPA) - code grant with PKCE

Even I know that PKCE it's rather secure, however I feel bad to relegate authentication solely on client side. Every React SPA has backend (at least it should be hosted somewhere).

I want to have server side in Node (Express) to securely save client password and make all heavy lifting with Identity Server and React for front-end.

As I already said there is a lot of examples of "Node (Express) with template engines" for authentication. But I want to use React as "template engine".

So, I am looking for full and correct implementation of it. Meanwhile I cannot find it. Can anybody help me with it - to find an example?

reactjs oauth-2.0 express openid-connect authentication
2 Answers

You need some actual protection in the SPA / browser though, and the 2 common options are:

  • Plug in OIDC Client Library to do the heavy lifting, so that you don't write much security code yourself. This library runs a number of strict security checks before accepting tokens.

  • Use a proxying solution that results in your SPA getting a cookie. For an SPA this tends to be a more of a home grown solution rather than a standards based one

RESOURCES OF MINE FOR OPTION 1

FOR OPTION 2

user_90198850

I've found 2 solution on the Internet.

The First : Implement social authentication with React + RESTful API

  1. On the frontend, get the 3rd party app’s login popup to appear.
  2. (Still on the frontend) Grab the authentication token the 3rd party app returns after >agreeing to login.
  3. (Yep, still frontend) Send that token to the backend as part of the body of your >request. (I like to use Blobs, but that’s just me.)
  4. On the backend, verify the token.
  5. If the token is authentic, you will receive the user as part of the verification >response (at least that’s the case with Passport.js, which we’ll be using).
  6. Save the user’s data to your database.
  7. Return a JWT token to the frontend. What you do with that token is out of scope for >this tutorial, but it should probably be used to authenticate each of the logged in >user’s actions.

Very well explained, with github working example social-auth-example It's only for social authentications, but I think no problem to make something more general or at least to add my OpenID Connect Auth. provider.

The second example: React Authentication with Twitter, Google, Facebook and Github

This approach uses socket.io. Very interesting.

P.S. So, I need to figure out what solution is more secure and if there any security breaches. Not easy task to do. It's so pity, there is no standard flow for my problem. I can find 1000 reasons why it's better to make all heavy lifting on back-end and not to rely on OIDC Client Library. The first reason is my boss :)

user_116030570
Related