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/
npm i react-simple-auth
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.
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
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)