Fix logout with Auth0

README.md

@@ -20,7 +20,7 @@
 - [CLI Flags](docs/cli-flags.md)
 - JHipster Integrations
   - [OAuth 2.0 and OpenID Connect](docs/oauth2-oidc.md)
-  - [Websockets](docs/websockets.md)
+  - [WebSockets](docs/websockets.md)
 - React Native Library Integrations
   - [Expo](https://docs.expo.io/) - A framework and platform for universal React application
   - [React Native Web](https://docs.expo.io/workflow/web/) - Run your React Native application in a browser, including PWA support
@@ -37,12 +37,12 @@
   - Verify version with `node -v`
 - [generator-jhipster-react-native](https://github.com/jhipster/generator-jhipster-react-native) installed
   - Install with `npm install -g generator-jhipster-react-native`
-- [expo-cli](https://docs.expo.io/get-started/installation/) installed
+- [expo-cli](https://docs.expo.dev/get-started/installation/) installed
   - Install with `npm install -g expo-cli`
   - To run your app on an emulator instead of a device, follow the platform-specific instructions:
-    - [Android](https://docs.expo.io/workflow/android-studio-emulator/)
-    - [iOS](https://docs.expo.io/workflow/ios-simulator/)
-- JHipster backend must use JWT or OAuth2 auth types.
+    - [Android](https://docs.expo.dev/workflow/android-studio-emulator/)
+    - [iOS](https://docs.expo.dev/workflow/ios-simulator/)
+- JHipster backend must use JWT or OAuth2 `authenticationType`
 
 Create a directory for your app:
 

docs/oauth2-oidc.md

@@ -12,6 +12,7 @@ Configure the redirect URIs for your app in your Identity Provider's authorized
   - Use the value for `reactNativeAppName` in your `.yo-rc.json`
   - Use your Expo username in place of `@your-expo-username` (run `expo whoami`)
   - Used for [Expo's Auth Proxy](https://docs.expo.io/versions/latest/sdk/auth-session/#what--authexpoio--does-for-you)
+- Some identity providers may require you to configure this value as a logout URL too
 
 #### Web
 
@@ -42,8 +43,13 @@ Using the [Okta CLI](https://cli.okta.com/), run `okta apps create`
 
 Copy the provided `clientId` to `app/config/app-config.js`, and set `nativeClientId` to the copied value.  This is loaded in `login.sagas.js` during authentication.
 
-You can now log in to Okta through React Native clients on iOS, Android, and Web.
+> If you're using Auth0, you'll also need to change the `audience` in `app/modules/login/login.utils.ts`. For example:
+>
+> ```
+> audience: 'https://dev-06bzs1cu.us.auth0.com/api/v2/',
+> ```
 
+You can now log in to Okta through React Native clients on iOS, Android, and Web.
 
 #### Add Claims to Access Token
 
@@ -57,4 +63,4 @@ Expo's auth proxy does not currently work with logging out from the identity pro
 - Change `useExpoAuthProxy` to `false` in `app-config.js`
 - Configure your redirect URLs for logout in your identity provider
   - Usually something like `exp://127.0.0.1:19000` and `exp://10.0.0.114:19000`, where `10.0.0.114` is your local IP
-- A popup will appear on browser open, but will say "Expo wants to use identy-provider.com to sign in", but it will really be signing out.
+- A popup will appear on browser open, but will say "Expo wants to use identity-provider.com to sign in", but it will really be signing out.

docs/websockets.md

@@ -1,4 +1,4 @@
-## Websockets
+## WebSockets
 
 A websockets example is present under "Chat" in the Drawer Menu. JHipster React Native uses the existing `/websocket/tracker` endpoint to connect. It sends and receives chat messages using the `/topic/chat` message mapping.
 

generators/app/index.js

@@ -15,6 +15,7 @@ const {
   generateReactNativeApp,
   appendFiles,
   patchInFile,
+  patchBabel,
 } = require('../../lib');
 
 module.exports = class extends AppGenerator {
@@ -95,6 +96,7 @@ module.exports = class extends AppGenerator {
         this.fs.writeJSON('app.json', appConfig);
       },
       appendFiles: appendFiles.bind(this),
+      patchBabel: patchBabel.bind(this),
       replacePackageJsonVersionsInGeneratedApp() {
         this.debug('Replacing Package.json Versions');
         this.replacePackageJsonVersions('REPLACE_WITH_VERSION', path.join(__dirname, 'templates/package.json'));

generators/app/templates/.detoxrc.json.ejs

@@ -4,7 +4,7 @@
       "binaryPath": "e2e/Exponent.app",
       "type": "ios.simulator",
       "device": {
-        "type": "iPhone 11"
+        "type": "iPhone 12"
       }
     }
   },

generators/app/templates/app/modules/login/login.utils.ts.ejs

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import { DiscoveryDocument, makeRedirectUri } from 'expo-auth-session';
 import * as AuthSession from 'expo-auth-session';
 import { generateHexStringAsync, buildCodeAsync } from 'expo-auth-session/src/PKCE';
@@ -74,7 +75,8 @@ export async function doOauthPkceFlow(clientId: string, issuer: string): Promise
   // set up the IDP url, prepare codeVerifier and state
   const { authUrl, codeVerifier, state } = await getAuthParams(clientId, redirectUri, discovery);
   // redirect to the IDP
-  const authResult = await AuthSession.startAsync({ authUrl, returnUrl: Linking.makeUrl('/') });
+  const returnUri = Platform.OS === 'android' && !AppConfig.useExpoAuthProxy ? redirectUri : Linking.createURL('/');
+  const authResult = await AuthSession.startAsync({ authUrl, returnUrl: returnUri });
   // check the response for success/failure
   const code = extractCodeOrThrow(authResult, state);
   // exchange the received code for an access token
@@ -90,6 +92,10 @@ export async function logoutFromIdp(clientId: string, issuer: string, idToken: s
       // set up redirect uri
       const redirectUri = makeRedirectUri({ useProxy: AppConfig.useExpoAuthProxy });
       await WebBrowser.openAuthSessionAsync(`${endSessionEndpoint}?id_token_hint=${idToken}&client_id=${clientId}&post_logout_redirect_uri=${redirectUri}`, redirectUri);
+    } else if (issuer.includes('auth0.com')) {
+      // Auth0 need special handling since end_session_endpoint is not in oidc-configuration
+      const redirectUri = makeRedirectUri({ useProxy: AppConfig.useExpoAuthProxy });
+      await WebBrowser.openAuthSessionAsync(`${issuer}/v2/logout?client_id=${clientId}&returnTo=${redirectUri}`, redirectUri);
     }
   }
 }

generators/app/templates/package.expo.json

@@ -3,25 +3,25 @@
   "description": "Dependencies managed by Expo - need a specific version",
   "version": "0.0.1",
   "dependencies": {
-    "@expo/vector-icons": "^12.0.0",
-    "@react-native-async-storage/async-storage": "~1.15.0",
-    "@react-native-community/datetimepicker": "3.5.2",
-    "@react-native-community/masked-view": "0.1.10",
-    "@react-native-picker/picker": "1.16.1",
-    "expo-auth-session": "~3.2.3",
-    "expo-constants": "~11.0.1",
-    "expo-linking": "~2.3.1",
-    "expo-splash-screen": "~0.11.2",
-    "expo-random": "~11.1.2",
-    "react-native-gesture-handler": "~1.10.2",
-    "react-native-web": "^0.14.13",
-    "expo-web-browser": "~9.1.0",
-    "react-native-reanimated": "~2.2.0",
-    "react-native-safe-area-context": "3.2.0",
-    "react-native-screens": "~3.4.0"
+    "@expo/vector-icons": "^13.0.0",
+    "@react-native-async-storage/async-storage": "~1.17.10",
+    "@react-native-community/datetimepicker": "6.2.0",
+    "@react-native-community/masked-view": "0.2.7",
+    "@react-native-picker/picker": "2.4.2",
+    "expo-auth-session": "~3.7.1",
+    "expo-constants": "~13.2.4",
+    "expo-linking": "~3.2.2",
+    "expo-splash-screen": "~0.16.2",
+    "expo-random": "~12.3.0",
+    "react-native-gesture-handler": "~2.5.0",
+    "react-native-web": "^0.18.9",
+    "expo-web-browser": "~11.0.0",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-screens": "~3.15.0"
   },
   "devDependencies": {
-    "jest-expo": "^42.0.0",
-    "@expo/webpack-config": "^0.12.63"
+    "jest-expo": "^46.0.1",
+    "@expo/webpack-config": "^0.17.2"
   }
 }

generators/app/templates/package.json

@@ -19,7 +19,7 @@
     "webstomp-client": "1.2.6",
     "sockjs-client": "1.5.2",
     "net": "1.0.2",
-    "@react-native-masked-view/masked-view": "0.2.6",
+    "@react-native-masked-view/masked-view": "0.2.7",
     "@react-navigation/drawer": "5.12.5",
     "@react-navigation/stack": "5.14.5",
     "react-native-sectioned-multi-select": "0.8.1",
@@ -32,8 +32,8 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "expo": "42",
-    "expo-cli": "4.13.0",
+    "expo": "46.0.20",
+    "create-expo-app": "1.1.1",
     "@storybook/addons": "5.3.21",
     "@storybook/react-native": "5.3.25",
     "@storybook/theming": "5.3.21",
@@ -55,8 +55,9 @@
     "expo-detox-hook": "1.0.10",
     "redux-devtools-extension": "2.13.9",
     "mockery": "2.1.0",
-    "typescript": "4.5.3",
+    "typescript": "4.6.3",
     "prettier": "2.5.1",
+    "react-test-renderer": "18.2.0",
     "patch-package": "6.4.7",
     "path-exists": "5.0.0",
     "resolve": "1.20.0",

generators/app/templates/package.json.ejs

@@ -10,7 +10,7 @@
     "publish": "expo publish",
     "build:ios": "expo build:ios",
     "build:android": "expo build:android",
-    "build:web": "expo build:web",
+    "build:web": "expo export:web",
     <%_ if (!context.skipCommitHook) { _%>
     "precommit": "lint-staged",
     <%_ } _%>
@@ -96,6 +96,7 @@
     <%_ } _%>
     "redux-devtools-extension": "REPLACE_WITH_VERSION",
     "mockery": "REPLACE_WITH_VERSION",
+    "react-test-renderer": "REPLACE_WITH_VERSION",
     "prettier": "REPLACE_WITH_VERSION",
     "patch-package": "REPLACE_WITH_VERSION",
     "typescript": "REPLACE_WITH_VERSION",
@@ -130,11 +131,8 @@
     "setupFiles": [
       "./test/setup"
     ],
-    "transform": {
-      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
-    },
     "transformIgnorePatterns": [
-      "node_modules/(?!(@react-native-community|react-native|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|@storybook))"
+      "node_modules/(?!(@react-native-community|@react-native|react-native|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|@storybook))"
     ],
     "coveragePathIgnorePatterns": [
       "app/shared/services/api.js",
@@ -145,7 +143,7 @@
     "preset": "jest-expo"
   },
   "engines": {
-    "node": ">=12.x",
+    "node": ">=14.x",
     "npm": ">=6.x"
   }
 }

generators/app/templates/webpack.config.js.ejs

@@ -4,8 +4,6 @@ module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(
     {
       ...env,
-      // Passing true will enable the default Workbox + Expo SW configuration.
-      offline: false,
     },
     argv,
   );

generators/heroku/index.js

@@ -104,8 +104,9 @@ module.exports = class extends HerokuGenerator {
       },
       addHerokuDependencies() {
         const packageJsonSource = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
-        packageJsonSource.dependencies['http-server'] = '0.12.3';
-        packageJsonSource.scripts['heroku-prebuild'] = 'npm install -g expo-cli http-server gzipper generator-jhipster-react-native';
+        packageJsonSource.dependencies['http-server'] = '14.1.1';
+        packageJsonSource.scripts['heroku-prebuild'] =
+          'npm install -g expo-cli eas-cli http-server gzipper generator-jhipster-react-native';
         packageJsonSource.scripts['heroku-postbuild'] = 'npm run build:web && gzipper compress ./web-build --brotli';
         this.fs.writeJSON('package.json', packageJsonSource);
       },

lib/generate-react-native-app.js

@@ -2,17 +2,17 @@ const chalk = require('chalk');
 const fse = require('fs-extra');
 const dependenciesPackageJson = require('../generators/app/templates/package.json');
 
-const expoCliVersion = dependenciesPackageJson.devDependencies['expo-cli'];
+const createExpoAppVersion = dependenciesPackageJson.devDependencies['create-expo-app'];
 const expoSdkVersion = dependenciesPackageJson.devDependencies.expo;
 
 function generateReactNativeApp() {
   const name = this.context.reactNativeAppName;
-  this.info(chalk.green("Running 'npx expo-cli init', this will take some time..."));
+  this.info(chalk.green("Running 'npx create-expo-app', this will take some time..."));
   try {
     // remove the expected folder in case it already exists
     fse.removeSync(`${process.cwd()}/${name}/`);
 
-    const generateCommand = `expo-cli@${expoCliVersion} init --npm -t expo-template-blank-typescript@sdk-${expoSdkVersion} --no-install --non-interactive ${name}`;
+    const generateCommand = `-y create-expo-app@${createExpoAppVersion} -t expo-template-blank-typescript@${expoSdkVersion} --no-install ${name}`;
     this.debug(generateCommand);
 
     // generate the expo app

lib/index.js

@@ -5,6 +5,7 @@ const { createEarlyFiles } = require('./pre-write');
 const { generateReactNativeApp } = require('./generate-react-native-app');
 const { appendFiles } = require('./append-files');
 const { getAppFolder } = require('./get-app-folder');
+const { patchBabel } = require('./patch-babel');
 const { patchNavigationForEntity } = require('./patch-navigation');
 const { patchInFile } = require('./patch-in-file');
 const { patchEntityApi } = require('./patch-entity-api');
@@ -19,6 +20,7 @@ module.exports = {
   generateReactNativeApp,
   appendFiles,
   getAppFolder,
+  patchBabel,
   patchInFile,
   patchNavigationForEntity,
   patchEntityApi,

lib/merge-react-native-package-json.js

@@ -10,7 +10,7 @@ function mergeReactNativePackageJson() {
   utils.renderContent('package.json.ejs', _this, _this, {}, templatedPackageJsonAsString => {
     this.debug(templatedPackageJsonAsString);
     const mergedPackageJson = JSON.parse(templatedPackageJsonAsString);
-    // merge these sections, with a precedence to the our templated version
+    // merge these sections, with a precedence to our templated version
     const keys = ['scripts', 'dependencies', 'devDependencies'];
     // loop through the keys
     keys.forEach(packageJsonSectionKey => {

lib/patch-babel.js

@@ -0,0 +1,11 @@
+function patchBabel() {
+  this.patchInFile('babel.config.js', {
+    after: 'presets',
+    insert: "plugins: ['react-native-reanimated/plugin'],",
+    ignoreIfContains: 'react-native-reanimated',
+  });
+}
+
+module.exports = {
+  patchBabel,
+};