mattmazzola / react-simple-auth

Authentication library for React based on Ember-Simple-Auth

React-Simple-Auth

Simple Authentication for React

Resources

• Detailed Walkthrough:
  https://medium.com/p/de6ea9df0a63

• Video demonstration:
  https://www.youtube.com/watch?v=BEUrlvHY8eE

• Sample Application using react-simple-auth:
  https://github.com/mattmazzola/react-simple-auth-sample

Technical Docs:
https://mattmazzola.github.io/react-simple-auth/

Getting started

Installation

npm i react-simple-auth

Copy redirect.html

Copy file from /node_modules/react-simple-auth/dist/redirect.html into folder that will service static files. E.g. If you are using create-react-app this will be the public folder. Ensure your OAuth provider is configured to redirect to this html page instead of your normal application / index page.

Create a provider

You would have to look at each OAuth provider's developer documentation for details.

Create a javascript object implementing the IProvider interface.

See the sample for Microsoft AAD v2 OpenID-Connect from the sample project:
https://github.com/mattmazzola/react-simple-auth-sample/blob/master/src/providers/microsoft.ts

Based on these docs:
https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-protocols

Call the various methods from the auth service

Import:

import RSA from 'react-simple-auth'
import facebookProvider from './providers/facebook'

Somewhere inside the component:

// Open login window and wait for user to sign in
const session = await RSA.acquireTokenAsync(facebookProvider)

// Invoke Redux login action dispatcher
login(session.userId, session.userName)

react-simple-auth's Issues

facebook changes window.name

I checked how it works and found that the script uses window.name as requestKey to communicate via local
storage to set url in it.
There is an issue with login with facebook in case you are not logged in.
Facebook changes window.name on load the page so once you logged in it redirects you to redirect url but it has already different window.name and we set wrong item.
I suggest to use window.opener to communicate between windows.
As a workaround I update url in window.opener, close the window and then update session key in localStorage with url and just get access token without async

hope `window.name` can be past to `buildAuthorizeUrl`

↑

Support Authorization Code Grant

Thanks for the great work. I have a Feature Request - I don't think it would take too much to support Authorization Code Grant with a Public Client (no client secret). This seems to be recommended more these days over implicit for Single Page Apps. Also, it would give the opportunity to implement a refresh token. Thanks

Old description on npm.

The description on https://www.npmjs.com/package/react-simple-auth is from a previous commit. Probably doing a minor (v1.0.1) release would fix that.

Restoring session not working

Restoring session not working with other services than microsoft
https://medium.com/@mattmazzola/react-simple-auth-react-redux-oauth-2-0-de6ea9df0a63#72b3

I'm using Dropbox provider and as soon as the page is reloaded the Access token is lost.