Adding jwt-decode

Author: gardner

example/package-lock.json

@@ -4,11 +4,11 @@ import { AuthProvider, AuthService } from 'react-oauth2-pkce'
 import { Routes } from './Routes';
 
 const authService = new AuthService({
-  clientId: process.env.REACT_APP_CLIENT_ID || 'CHANGEME',
-  location: window.location,
-  provider: process.env.REACT_APP_PROVIDER || 'https://sandbox.auth.ap-southeast-2.amazoncognito.com/oauth2',
-  redirectUri: process.env.REACT_APP_REDIRECT_URI || window.location.origin,
-  scopes: ['openid', 'profile']
+clientId: process.env.REACT_APP_CLIENT_ID || 'CHANGEME',
+location: window.location,
+provider: process.env.REACT_APP_PROVIDER || 'https://sandbox.auth.ap-southeast-2.amazoncognito.com/oauth2',
+redirectUri: process.env.REACT_APP_REDIRECT_URI || window.location.origin,
+scopes: ['openid', 'profile']
 });
 
 const App = () => {

example/src/App.tsx

@@ -40,6 +40,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "@types/jest": "^25.1.4",
+    "@types/jwt-decode": "^2.2.1",
     "@types/node": "^12.12.38",
     "@types/react": "^16.9.27",
     "@types/react-dom": "^16.9.7",

package-lock.json

@@ -1,5 +1,7 @@
 import { AuthService, AuthTokens, AuthServiceProps } from './AuthService'
 
+// import tokens from './__fixtures__/tokens.json'
+
 const props: AuthServiceProps = {
   clientId: 'testClientID',
   clientSecret: undefined,
@@ -39,18 +41,8 @@ describe('AuthService', () => {
     })
   })
 
-  // it('it retrives a token', () => {
-  //   const mockJsonPromise = Promise.resolve(JSON.stringify(stubTokens))
-  //   const mockFetchPromise = Promise.resolve({
-  //     json: () => mockJsonPromise
-  //   })
-  //   jest.spyOn(global, 'fetch').mockImplementation(() => mockFetchPromise)
-  //   const fetchSpy: SpyInstance = jest.spyOn(global.prototype, 'fetch')
-
-  //   const authorizationCode = 'authorizationCode'
-  //   authService.fetchToken(authorizationCode).then((tokens) => {
-  //     expect(tokens.accessToken).toContainEqual(stubTokens.accessToken)
-  //     expect(fetchSpy).toHaveBeenCalled()
-  //   })
+  // it('it parses a token', () => {
+  //   window.localStorage.setItem('auth', tokens)
+  //   authService.getUser()
   // })
 })

package.json

@@ -1,6 +1,8 @@
 import { createPKCECodes, PKCECodePair } from './pkce'
 import { toUrlEncoded } from './util'
 
+import jwtDecode from 'jwt-decode'
+
 export interface AuthServiceProps {
   clientId: string
   clientSecret?: string
@@ -12,11 +14,18 @@ export interface AuthServiceProps {
 }
 
 export interface AuthTokens {
-  idToken: string
-  accessToken: string
-  refreshToken: string
-  expiresIn: number
-  tokenType: string
+  id_token: string
+  access_token: string
+  refresh_token: string
+  expires_in: number
+  token_type: string
+}
+
+export interface JWTIDToken {
+  given_name: string
+  family_name: string
+  name: string
+  email: string
 }
 
 export class AuthService {
@@ -26,6 +35,13 @@ export class AuthService {
     this.props = props
   }
 
+  getUser(): {} {
+    const t = this.getAuthTokens()
+    if (null === t) return {}
+    const decoded = jwtDecode(t.id_token) as {}
+    return decoded
+  }
+
   getCodeFromLocation(location: Location): string | null {
     const split = location.toString().split('?')
     if (split.length < 2) {
@@ -93,16 +109,20 @@ export class AuthService {
     return window.localStorage.getItem('auth') !== null
   }
 
-  logout(): void {
+  async logout(): Promise<void> {
     const { location } = this.props
     this.removeItem('pkce')
     this.removeItem('auth')
     location.reload()
   }
 
+  async login(): Promise<void> {
+    this.authorize()
+  }
+
   // this will do a full page reload and to to the OAuth2 provider's login page and then redirect back to redirectUri
   authorize(): void {
-    const { clientId, location, provider, redirectUri, scopes } = this.props
+    const { clientId, provider, redirectUri, scopes } = this.props
 
     const pkce = createPKCECodes()
     window.localStorage.setItem('pkce', JSON.stringify(pkce))
@@ -119,7 +139,7 @@ export class AuthService {
     }
     // Responds with a 302 redirect
     const url = `${provider}/authorize?${toUrlEncoded(query)}`
-    location.replace(url)
+    window.location.href = url
   }
 
   // this happens after a full page reload. Read the code from localstorage

src/AuthService.test.ts

@@ -3,6 +3,7 @@ import { randomBytes, createHash } from 'crypto'
 export type PKCECodePair = {
   codeVerifier: string
   codeChallenge: string
+  createdAt: Date
 }
 
 export const base64URLEncode = (str: Buffer): string => {
@@ -20,9 +21,11 @@ export const sha256 = (buffer: Buffer): Buffer => {
 export const createPKCECodes = (): PKCECodePair => {
   const codeVerifier = base64URLEncode(randomBytes(64))
   const codeChallenge = base64URLEncode(sha256(Buffer.from(codeVerifier)))
+  const createdAt = new Date()
   const codePair = {
     codeVerifier,
-    codeChallenge
+    codeChallenge,
+    createdAt
   }
   return codePair
 }