Silent signin (#4)

* Attempt silent sign in before redirecting to the hosted login page.

* Render placeholderComponent in RedirectToAuth in case we are doing a silent auth.

* Updated tests to reflect the RedirectToAuth rendering a placeholder

* 0.2.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-oidc",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Wrapper for the OIDC JavaScript client, to be used in React projects.",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

src/RedirectToAuth/index.tsx

@@ -1,15 +1,25 @@
 import * as React from 'react'
-import { UserManager } from 'oidc-client'
+import { UserManager, User } from 'oidc-client'
 
 export interface IRedirectToAuthProps {
   userManager: UserManager
+  onSilentSuccess: (user: User) => void
 }
 class RedirectToAuth extends React.Component<IRedirectToAuthProps> {
-  public componentDidMount() {
-    this.props.userManager.signinRedirect()
+  public async componentDidMount() {
+    if (this.props.userManager.signinSilent) {
+      try {
+        const user = await this.props.userManager.signinSilent()
+        this.props.onSilentSuccess(user)
+      } catch (e) {
+        this.props.userManager.signinRedirect()
+      }
+    } else {
+      this.props.userManager.signinRedirect()
+    }
   }
-  public render(): null {
-    return null
+  public render() {
+    return this.props.children || null
   }
 }
 

src/makeAuth/index.test.tsx

@@ -29,7 +29,7 @@ describe('makeAuthenticator', () => {
     getByText('Make Auth Child')
   })
 
-  it('does not render children if user is not authenticated', async () => {
+  it('does not render authed children if user is not authenticated', async () => {
     const userManagerConfig = {
       getUserFunction: expiredGetUser
     } as any
@@ -42,10 +42,9 @@ describe('makeAuthenticator', () => {
 
     await expect(expiredGetUser()).resolves.toEqual({ expired: true })
     expect(queryByText('Make Auth Child')).toBeNull()
-    expect(queryByText('Placeholder')).toBeNull()
   })
 
-  it('does not render children if there is an error retrieving user auth state', async () => {
+  it('does not render authed children if there is an error retrieving user auth state', async () => {
     const userManagerConfig = {
       getUserFunction: failedGetUser
     } as any
@@ -58,7 +57,6 @@ describe('makeAuthenticator', () => {
 
     await expect(expiredGetUser()).resolves.toEqual({ expired: true })
     expect(queryByText('Make Auth Child')).toBeNull()
-    expect(queryByText('Placeholder')).toBeNull()
   })
 
   it('renders placeholder when getting user auth state', async () => {

src/makeAuth/index.tsx

@@ -95,7 +95,12 @@ function makeAuthenticator({
         return this.isValid() ? (
           <Provider value={this.state.context}>{WrappedComponent}</Provider>
         ) : (
-          <RedirectToAuth userManager={this.userManager} />
+          <RedirectToAuth
+            userManager={this.userManager}
+            onSilentSuccess={this.storeUser}
+          >
+            {placeholderComponent}
+          </RedirectToAuth>
         )
       }
     }