Upgrade to Okta React 4.0 with TypeScript support 💥

package-sdks.json

@@ -4,7 +4,8 @@
   "description": "Dependencies for npm-check-updates",
   "dependencies": {
     "@okta/okta-angular": "3.0.1",
-    "@okta/okta-react": "3.0.10",
+    "@okta/okta-react": "4.0.0",
+    "@okta/okta-auth-js": "4.2.0",
     "react-router-dom": "5.2.0",
     "@types/react-router-dom": "5.1.6",
     "@okta/okta-react-native": "1.4.4",
@@ -15,12 +16,14 @@
     "@okta/okta-vue": "2.1.1",
     "@types/okta__okta-vue": "1.2.2",
     "ionic-appauth": "0.7.4",
-    "@ionic/storage": "2.3.1",
+    "@ionic-native/secure-storage": "5.30.0",
     "cordova-plugin-secure-storage-echo": "5.1.1",
     "cordova-plugin-advanced-http": "3.1.0",
     "cordova-plugin-safariviewcontroller": "1.6.0",
-    "@ionic-native/http": "5.29.0",
+    "@ionic-native/http": "5.30.0",
+    "@ionic/storage": "2.3.1",
     "express-session": "1.17.1",
-    "@okta/oidc-middleware": "4.0.1"
+    "@okta/oidc-middleware": "4.0.1",
+    "dotenv": "8.2.0"
   }
 }

package.json

@@ -36,12 +36,12 @@
     "schematics-utilities": "2.0.2"
   },
   "devDependencies": {
-    "@types/jasmine": "3.6.1",
-    "@types/node": "14.14.8",
+    "@types/jasmine": "3.6.2",
+    "@types/node": "14.14.9",
     "chalk": "4.1.0",
     "istanbul": "0.4.5",
     "jasmine": "3.6.3",
-    "typescript": "4.0.5"
+    "typescript": "4.1.2"
   },
   "resolutions": {
     "handlebars": "4.5.3"

src/add-auth/index.ts

@@ -33,7 +33,8 @@ function addPackageJsonDependencies(framework: string, options: any): Rule {
     if (framework === ANGULAR) {
       dependencies.push({type: NodeDependencyType.Default, version: '3.0.1', name: '@okta/okta-angular'})
     } else if (framework === REACT || framework === REACT_TS) {
-      dependencies.push({type: NodeDependencyType.Default, version: '3.0.10', name: '@okta/okta-react'});
+      dependencies.push({type: NodeDependencyType.Default, version: '4.0.0', name: '@okta/okta-react'});
+      dependencies.push({type: NodeDependencyType.Default, version: '4.2.0', name: '@okta/okta-auth-js'});
       dependencies.push({type: NodeDependencyType.Default, version: '5.2.0', name: 'react-router-dom'});
       if (framework === REACT_TS) {
         dependencies.push({type: NodeDependencyType.Default, version: '5.1.6', name: '@types/react-router-dom'});
@@ -51,7 +52,7 @@ function addPackageJsonDependencies(framework: string, options: any): Rule {
       }
     } else if (framework === IONIC_ANGULAR) {
       dependencies.push({type: NodeDependencyType.Default, version: '0.7.4', name: 'ionic-appauth'});
-      dependencies.push({type: NodeDependencyType.Default, version: '5.23.0', name: '@ionic-native/secure-storage'});
+      dependencies.push({type: NodeDependencyType.Default, version: '5.30.0', name: '@ionic-native/secure-storage'});
       if (options.platform === 'capacitor') {
         dependencies.push({
           type: NodeDependencyType.Default,
@@ -64,7 +65,7 @@ function addPackageJsonDependencies(framework: string, options: any): Rule {
           version: '1.6.0',
           name: 'cordova-plugin-safariviewcontroller'
         });
-        dependencies.push({type: NodeDependencyType.Default, version: '5.29.0', name: '@ionic-native/http'});
+        dependencies.push({type: NodeDependencyType.Default, version: '5.30.0', name: '@ionic-native/http'});
       } else {
         dependencies.push({type: NodeDependencyType.Default, version: '2.3.1', name: '@ionic/storage'});
       }
@@ -231,7 +232,7 @@ export function addAuth(options: any): Rule {
     if (framework === REACT || framework === REACT_TS) {
       const jestConfig = {
         'moduleNameMapper': {
-          '^@okta/okta-auth-js$': '<rootDir>/node_modules/@okta/okta-auth-js/dist/okta-auth-js.min.js'
+          '^@okta/okta-auth-js$': '<rootDir>/node_modules/@okta/okta-auth-js/dist/okta-auth-js.umd.js'
         }
       }
       const content: Buffer | null = host.read('./package.json');

src/add-auth/react-ts/src/App.tsx

@@ -1,20 +1,22 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { OktaAuth, OktaAuthOptions } from '@okta/okta-auth-js';
 import { LoginCallback, Security } from '@okta/okta-react';
 import Home from './Home';
 
-const config = {
+const config: OktaAuthOptions = {
   issuer: '<%= issuer %>',
-  redirect_uri: window.location.origin + '/callback',
-  client_id: '<%= clientId %>'
+  clientId: '<%= clientId %>',
+  redirectUri: window.location.origin + '/callback'
 };
+const oktaAuth = new OktaAuth(config);
 
 class App extends Component {
 
   render() {
     return (
       <Router>
-        <Security {...config}>
+        <Security oktaAuth={oktaAuth}>
           <Route path="/" exact={true} component={Home}/>
           <Route path="/callback" component={LoginCallback}/>
         </Security>

src/add-auth/react-ts/src/Home.tsx

@@ -19,11 +19,11 @@ export default withOktaAuth(class Home extends Component<HomeProps, HomeState> {
   }
 
   async login() {
-    await this.props.authService.login();
+    await this.props.oktaAuth.signInWithRedirect();
   }
 
   async logout() {
-    await this.props.authService.logout();
+    await this.props.oktaAuth.signOut();
   }
 
   render() {

src/add-auth/react-ts_spec.ts

@@ -27,15 +27,14 @@ describe('OktaDev Schematics: React + TypeScript', () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
     await runner.runSchematicAsync('add-auth', {...defaultOptions}, tree).toPromise();
 
-    expect(tree.files.length).toEqual(5);
-    expect(tree.files.sort()).toEqual(['/package.json', '/src/App.test.tsx', '/src/App.tsx', '/src/Home.tsx',
-      '/src/okta.d.ts']);
+    expect(tree.files.length).toEqual(4);
+    expect(tree.files.sort()).toEqual(['/package.json', '/src/App.test.tsx', '/src/App.tsx', '/src/Home.tsx']);
 
     const componentContent = tree.readContent('/src/App.tsx');
 
     expect(componentContent).toMatch(/class App extends Component/);
     expect(componentContent).toContain(`issuer: '${defaultOptions.issuer}'`);
-    expect(componentContent).toContain(`client_id: '${defaultOptions.clientId}'`);
+    expect(componentContent).toContain(`clientId: '${defaultOptions.clientId}'`);
   });
 
   it('fail with no package.json', async () => {

src/add-auth/react/src/App.js

@@ -1,20 +1,21 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { OktaAuth } from '@okta/okta-auth-js';
 import { LoginCallback, Security } from '@okta/okta-react';
 import Home from './Home';
 
-const config = {
+const oktaAuth = new OktaAuth({
   issuer: '<%= issuer %>',
-  redirect_uri: window.location.origin + '/callback',
-  client_id: '<%= clientId %>'
-};
+  clientId: '<%= clientId %>',
+  redirectUri: window.location.origin + '/callback'
+});
 
 class App extends Component {
 
   render() {
     return (
       <Router>
-        <Security {...config}>
+        <Security oktaAuth={oktaAuth}>
           <Route path="/" exact={true} component={Home}/>
           <Route path="/callback" component={LoginCallback}/>
         </Security>

src/add-auth/react/src/Home.js

@@ -11,11 +11,11 @@ export default withOktaAuth(class Home extends Component {
   }
 
   async login() {
-    await this.props.authService.login();
+    await this.props.oktaAuth.signInWithRedirect();
   }
 
   async logout() {
-    await this.props.authService.logout();
+    await this.props.oktaAuth.signOut();
   }
 
   render() {

src/add-auth/react_spec.ts

@@ -34,6 +34,6 @@ describe('OktaDev Schematics: React', () => {
 
     expect(componentContent).toMatch(/class App extends Component/);
     expect(componentContent).toContain(`issuer: '${defaultOptions.issuer}'`);
-    expect(componentContent).toContain(`client_id: '${defaultOptions.clientId}'`);
+    expect(componentContent).toContain(`clientId: '${defaultOptions.clientId}'`);
   });
 });

test-app.sh

@@ -32,14 +32,14 @@ then
   ng test --watch=false && ng e2e
 elif [ $framework == "react-ts" ] || [ $framework == "rts" ]
 then
-  npx create-react-app react-app-ts --template typescript
+  npx create-react-app@4.0.1 react-app-ts --template typescript
   cd react-app-ts
   npm install -D ../../oktadev*.tgz
   schematics @oktadev/schematics:add-auth --issuer=$issuer --clientId=$clientId
   CI=true npm test
 elif [ $framework == "react" ] || [ $framework == "r" ]
 then
-  npx create-react-app react-app
+  npx create-react-app@4.0.1 react-app
   cd react-app
   npm install -D ../../oktadev*.tgz
   schematics @oktadev/schematics:add-auth --issuer=$issuer --clientId=$clientId