Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for Auth0 #782

Closed
mraible opened this issue Jun 2, 2022 · 19 comments · Fixed by #881
Closed

Add support for Auth0 #782

mraible opened this issue Jun 2, 2022 · 19 comments · Fixed by #881
Labels
$$ bug-bounty $$ https://www.jhipster.tech/bug-bounties/ $500 https://www.jhipster.tech/bug-bounties/

Comments

@mraible
Copy link
Contributor

mraible commented Jun 2, 2022

Describe the bug

Currently, this blueprint mostly works with Auth0. However, logout does not work.

Instructions To reproduce

This blog post shows how to reproduce. There's a section at the bottom with a possible solution.

JHipster app's .yo-rc.json

https://github.com/oktadev/auth0-full-stack-java-example/blob/main/.yo-rc.json

Entity JDL or JSON files

https://github.com/oktadev/auth0-full-stack-java-example/blob/main/flickr2.jdl

Versions (please complete the following information):

  • JHipster React Native Version: 4.2.5
@mraible mraible added $$ bug-bounty $$ https://www.jhipster.tech/bug-bounties/ $500 https://www.jhipster.tech/bug-bounties/ labels Jun 9, 2022
@ThakurKarthik
Copy link

ThakurKarthik commented Aug 27, 2022

Hello, new to jhipster ! I was trying to do the setup of app following here https://deploy-preview-1024--okta-blog.netlify.app/blog/2022/06/15/react-native-spring-boot Right now I am getting some 401 error from axios, is there an community help channel where I can ask for help ?
image

Also looking into this doc https://github.com/jhipster/generator-jhipster-react-native/blob/main/docs/oauth2-oidc.md#log-out-from-the-identity-provider-iosandroid isn't logout disabled by default ?

@mraible
Copy link
Contributor Author

mraible commented Aug 27, 2022

I've tested this blueprint with Keycloak and Okta and successfully logged out. Auth0 does not work for logout because their openid-configuration does not contain an end session endpoint. We need to implement a workaround for this.

I hope to try and bring this library up-to-date in the next few weeks if time allows.

@mraible
Copy link
Contributor Author

mraible commented Aug 27, 2022

As far as a community help channel, this is the best spot to get help.

@ThakurKarthik
Copy link

I've tested this blueprint with Keycloak and Okta and successfully logged out. Auth0 does not work for logout because their openid-configuration does not contain an end session endpoint. We need to implement a workaround for this.

I hope to try and bring this library up-to-date in the next few weeks if time allows.

Yeah project is using expo 42 which is not supported in the expo go app, I had too upgrade to expo 44 just to make it work.

@mraible
Copy link
Contributor Author

mraible commented Aug 27, 2022

I'm happy to review and merge and PRs you contribute! If you have time, of course. 😊

@ThakurKarthik
Copy link

I realised my mistake, I had to do source .auth0.env file and restarted the server with ./mvnw I was able to login but had to add this "https://auth.expo.io/@karthik.01/Flickr2" to my callback url in the auth0.

coming to the other part, it looks like I am also able to logout without any issue.

VID_20220828203154.mp4

@mraible
Copy link
Contributor Author

mraible commented Aug 28, 2022

Yes, it does look like you can log out from the app. However, does it log out from Auth0 too? If you click login again, does it prompt you for credentials, or does it just log you right in?

@ThakurKarthik
Copy link

Yes, it is asking for credentials again.

@mraible
Copy link
Contributor Author

mraible commented Aug 28, 2022

Cool! I'll give it a try this week.

@mraible
Copy link
Contributor Author

mraible commented Aug 30, 2022

@ThakurKarthik See the PR that fixes this issue to see what I had to do to make logout work with Auth0.

@mraible
Copy link
Contributor Author

mraible commented Aug 30, 2022

How did you upgrade to Expo 44? I've succeeded in getting it to work with web and iOS, but login fails on Android.

@ThakurKarthik
Copy link

Hello I think I followed this guide for upgrade https://blog.expo.dev/expo-sdk-44-4c4b8306584a

@mraible
Copy link
Contributor Author

mraible commented Aug 30, 2022

I tried using the instructions from that guide:

npm i -g expo-cli
expo upgrade

Then I tried npm i and npm start. I get an error when trying to run it on Android:

› Opening exp://192.168.7.78:19000 on Pixel_2_API_31
✔ Expo Go on Pixel_2_API_31 is outdated, would you like to upgrade? … yes
Uninstalling Expo Go from android device Pixel_2_API_31.
› Press ? │ show all commands
Android Bundling failed 9532ms
error: node_modules/react-native-reanimated/src/index.ts: /Users/mraible/Downloads/auth0-react-native-jhipster-example/mobile/node_modules/react-native-reanimated/src/index.ts: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`.
  5 | export * from './reanimated1';
  6 | export * from './reanimated2';
> 7 | export * as default from './Animated';

I tried adding the react-native-reanimated plugin to babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin',
    ]
  };
};

Suggestion found here.

Then, I cleared my cache with expo r -c and tried npm start again. It warned me that I might be using the wrong commands:

This command is being executed with the global Expo CLI. Learn more.
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo start

Since npm start just results in a screen with a bowtie (and nothing more), I tried npx expo start and hit r to reload the app. The app loads, but Expo crashes.

Screenshot_1661865507

I ran adb reverse tcp:8080 tcp:8080 and tried npx expo start again. This time, I was able to complete the login flow, but I get a Login dismissed error at the end. In my console, it shows:

Android Bundling complete 3790ms
 LOG  Account - FAIL
 ERROR  {"type": "dismiss"}

Did you experience anything like this?

@mraible
Copy link
Contributor Author

mraible commented Aug 30, 2022

If I open Android Studio and monitor the logs, this is what I see before the error:

2022-08-30 07:27:34.321 708-933/? D/PeopleSpaceWidgetMgr: Sbn doesn't contain valid PeopleTileKey: null/0/host.exp.exponent
2022-08-30 07:27:34.323 3001-21011/? W/NetworkScheduler: Error inserting flex_time=3567000 job_id=-1 period=7136000 source=16 requires_charging=0 preferred_network_type=1 target_class=com.google.android.gms.measurement.PackageMeasurementTaskService user_id=0 target_package=com.google.android.gms tag=Measurement.PackageMeasurementTaskService.UPLOAD_TASK_TAG task_type=0 required_idleness_state=0 service_kind=0 source_version=222615000 persistence_level=1 preferred_charging_state=1 required_network_type=0 runtime=1661866054320 retry_strategy={"maximum_backoff_seconds":{"3600":0},"initial_backoff_seconds":{"30":0},"retry_policy":{"0":0}} last_runtime=0 [CONTEXT service_id=218 ]
    android.database.sqlite.SQLiteConstraintException: UNIQUE constraint failed: pending_ops.tag, pending_ops.target_class, pending_ops.target_package, pending_ops.user_id (code 2067 SQLITE_CONSTRAINT_UNIQUE)
        at android.database.sqlite.SQLiteConnection.nativeExecuteForLastInsertedRowId(Native Method)
        at android.database.sqlite.SQLiteConnection.executeForLastInsertedRowId(SQLiteConnection.java:940)
        at android.database.sqlite.SQLiteSession.executeForLastInsertedRowId(SQLiteSession.java:790)
        at android.database.sqlite.SQLiteStatement.executeInsert(SQLiteStatement.java:89)
        at android.database.sqlite.SQLiteDatabase.insertWithOnConflict(SQLiteDatabase.java:1702)
        at android.database.sqlite.SQLiteDatabase.insertOrThrow(SQLiteDatabase.java:1597)
        at bezs.g(:com.google.android.gms@222615047@22.26.15 (190800-461192076):52)
        at beyl.n(:com.google.android.gms@222615047@22.26.15 (190800-461192076):3)
        at beyl.u(:com.google.android.gms@222615047@22.26.15 (190800-461192076):20)
        at beyl.h(:com.google.android.gms@222615047@22.26.15 (190800-461192076):3)
        at beuc.run(:com.google.android.gms@222615047@22.26.15 (190800-461192076):9)
        at xot.c(:com.google.android.gms@222615047@22.26.15 (190800-461192076):6)
        at xot.run(:com.google.android.gms@222615047@22.26.15 (190800-461192076):7)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
        at xty.run(:com.google.android.gms@222615047@22.26.15 (190800-461192076):0)
        at java.lang.Thread.run(Thread.java:920)
2022-08-30 07:27:34.332 1247-1247/? I/GoogleInputMethodService: GoogleInputMethodService.onFinishInput():3420 
2022-08-30 07:27:34.332 1247-1247/? W/KeyboardViewController: KeyboardViewController.show():477 Requesting to show sub view with id 2131428268(#0x7f0b03ac) when keyboard HEADER view is not ready to show
2022-08-30 07:27:34.332 1247-1247/? I/GoogleInputMethodService: GoogleInputMethodService.onStartInput():2002 
2022-08-30 07:27:34.333 20891-21193/? E/ReactNativeJS: { type: 'dismiss' }

@ThakurKarthik
Copy link

I tried using the instructions from that guide:

npm i -g expo-cli
expo upgrade

Then I tried npm i and npm start. I get an error when trying to run it on Android:

› Opening exp://192.168.7.78:19000 on Pixel_2_API_31
✔ Expo Go on Pixel_2_API_31 is outdated, would you like to upgrade? … yes
Uninstalling Expo Go from android device Pixel_2_API_31.
› Press ? │ show all commands
Android Bundling failed 9532ms
error: node_modules/react-native-reanimated/src/index.ts: /Users/mraible/Downloads/auth0-react-native-jhipster-example/mobile/node_modules/react-native-reanimated/src/index.ts: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`.
  5 | export * from './reanimated1';
  6 | export * from './reanimated2';
> 7 | export * as default from './Animated';

I tried adding the react-native-reanimated plugin to babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin',
    ]
  };
};

Suggestion found here.

Then, I cleared my cache with expo r -c and tried npm start again. It warned me that I might be using the wrong commands:

This command is being executed with the global Expo CLI. Learn more.
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo start

Since npm start just results in a screen with a bowtie (and nothing more), I tried npx expo start and hit r to reload the app. The app loads, but Expo crashes.

Screenshot_1661865507

I ran adb reverse tcp:8080 tcp:8080 and tried npx expo start again. This time, I was able to complete the login flow, but I get a Login dismissed error at the end. In my console, it shows:

Android Bundling complete 3790ms
 LOG  Account - FAIL
 ERROR  {"type": "dismiss"}

Did you experience anything like this?

Yes I had to add the reanimated plugin to babel.config file, I followed the same SO link :) I also removed the expo cache and It ran without issue. One thing I noticed is if you make this value to false for android platform I was getting the same Login dismiss log message. Apart from this I had to turn off the remote debugging for the app otherwise it was not loading at all. This is the local changes for my package.json file

diff --git a/package.json b/package.json
index 7a898d4..96f0a5f 100644
--- a/package.json
+++ b/package.json
@@ -59,41 +59,41 @@
   "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/datetimepicker": "4.0.0",
     "@react-native-masked-view/masked-view": "0.2.6",
-    "@react-native-picker/picker": "1.16.1",
+    "@react-native-picker/picker": "2.2.1",
     "@react-navigation/devtools": "6.0.4",
     "@react-navigation/drawer": "5.12.5",
     "@react-navigation/native": "5.9.4",
     "@react-navigation/stack": "5.14.5",
     "apisauce": "2.1.2",
-    "expo": "~42.0.1",
-    "expo-auth-session": "~3.2.3",
-    "expo-constants": "~11.0.1",
-    "expo-linking": "~2.3.1",
-    "expo-random": "~11.1.2",
-    "expo-splash-screen": "~0.11.2",
-    "expo-status-bar": "~1.0.4",
-    "expo-web-browser": "~9.1.0",
+    "expo": "^44.0.0",
+    "expo-auth-session": "~3.5.0",
+    "expo-constants": "~13.0.1",
+    "expo-linking": "~3.0.0",
+    "expo-random": "~12.1.1",
+    "expo-splash-screen": "~0.14.1",
+    "expo-status-bar": "~1.2.0",
+    "expo-web-browser": "~10.1.0",
     "format-json": "1.0.3",
     "formik": "2.2.9",
     "identity-obj-proxy": "3.0.0",
     "lodash": "4.17.21",
     "querystringify": "2.2.0",
     "ramda": "0.27.1",
-    "react": "16.13.1",
+    "react": "17.0.1",
     "react-datepicker": "4.3.0",
-    "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
-    "react-native-gesture-handler": "~1.10.2",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.3",
+    "react-native-gesture-handler": "~2.1.0",
     "react-native-keyboard-aware-scroll-view": "0.9.4",
     "react-native-modal-datetime-picker": "13.0.0",
     "react-native-picker-select": "8.0.4",
-    "react-native-reanimated": "~2.2.0",
-    "react-native-safe-area-context": "3.2.0",
-    "react-native-screens": "~3.4.0",
+    "react-native-reanimated": "~2.3.1",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.10.1",
     "react-native-sectioned-multi-select": "0.8.1",
-    "react-native-web": "^0.14.13",
+    "react-native-web": "0.17.1",
     "react-redux": "7.2.6",
     "redux": "4.1.2",
     "redux-persist": "6.0.0",
@@ -103,14 +103,14 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@expo/webpack-config": "^0.12.63",
+    "@babel/core": "^7.12.9",
+    "@expo/webpack-config": "~0.16.2",
     "@react-native-community/eslint-config": "3.0.1",
     "@storybook/addons": "5.3.21",
     "@storybook/react-native": "5.3.25",
     "@storybook/theming": "5.3.21",
-    "@types/react": "~16.9.35",
-    "@types/react-native": "~0.63.2",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.64.12",
     "babel-jest": "27.4.2",
     "babel-preset-env": "1.7.0",
     "buffer": "6.0.3",
@@ -121,8 +121,8 @@
     "eslint-plugin-prettier": "4.0.0",
     "expect": "26.6.2",
     "generator-jhipster-react-native": "4.2.5",
-    "jest": "26.6.3",
-    "jest-expo": "^42.0.0",
+    "jest": "^26.6.3",
+    "jest-expo": "^44.0.0",
     "lint-staged": "12.1.2",
     "mockery": "2.1.0",
     "patch-package": "6.4.7",
@@ -132,7 +132,7 @@
     "resolve": "1.20.0",
     "rimraf": "3.0.2",
     "tapable": "2.2.1",
-    "typescript": "4.4.4"
+    "typescript": "~4.3.5"
   },
   "engines": {
     "node": ">=12.x",

@ThakurKarthik
Copy link

If I open Android Studio and monitor the logs, this is what I see before the error:

2022-08-30 07:27:34.321 708-933/? D/PeopleSpaceWidgetMgr: Sbn doesn't contain valid PeopleTileKey: null/0/host.exp.exponent
2022-08-30 07:27:34.323 3001-21011/? W/NetworkScheduler: Error inserting flex_time=3567000 job_id=-1 period=7136000 source=16 requires_charging=0 preferred_network_type=1 target_class=com.google.android.gms.measurement.PackageMeasurementTaskService user_id=0 target_package=com.google.android.gms tag=Measurement.PackageMeasurementTaskService.UPLOAD_TASK_TAG task_type=0 required_idleness_state=0 service_kind=0 source_version=222615000 persistence_level=1 preferred_charging_state=1 required_network_type=0 runtime=1661866054320 retry_strategy={"maximum_backoff_seconds":{"3600":0},"initial_backoff_seconds":{"30":0},"retry_policy":{"0":0}} last_runtime=0 [CONTEXT service_id=218 ]
    android.database.sqlite.SQLiteConstraintException: UNIQUE constraint failed: pending_ops.tag, pending_ops.target_class, pending_ops.target_package, pending_ops.user_id (code 2067 SQLITE_CONSTRAINT_UNIQUE)
        at android.database.sqlite.SQLiteConnection.nativeExecuteForLastInsertedRowId(Native Method)
        at android.database.sqlite.SQLiteConnection.executeForLastInsertedRowId(SQLiteConnection.java:940)
        at android.database.sqlite.SQLiteSession.executeForLastInsertedRowId(SQLiteSession.java:790)
        at android.database.sqlite.SQLiteStatement.executeInsert(SQLiteStatement.java:89)
        at android.database.sqlite.SQLiteDatabase.insertWithOnConflict(SQLiteDatabase.java:1702)
        at android.database.sqlite.SQLiteDatabase.insertOrThrow(SQLiteDatabase.java:1597)
        at bezs.g(:com.google.android.gms@222615047@22.26.15 (190800-461192076):52)
        at beyl.n(:com.google.android.gms@222615047@22.26.15 (190800-461192076):3)
        at beyl.u(:com.google.android.gms@222615047@22.26.15 (190800-461192076):20)
        at beyl.h(:com.google.android.gms@222615047@22.26.15 (190800-461192076):3)
        at beuc.run(:com.google.android.gms@222615047@22.26.15 (190800-461192076):9)
        at xot.c(:com.google.android.gms@222615047@22.26.15 (190800-461192076):6)
        at xot.run(:com.google.android.gms@222615047@22.26.15 (190800-461192076):7)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
        at xty.run(:com.google.android.gms@222615047@22.26.15 (190800-461192076):0)
        at java.lang.Thread.run(Thread.java:920)
2022-08-30 07:27:34.332 1247-1247/? I/GoogleInputMethodService: GoogleInputMethodService.onFinishInput():3420 
2022-08-30 07:27:34.332 1247-1247/? W/KeyboardViewController: KeyboardViewController.show():477 Requesting to show sub view with id 2131428268(#0x7f0b03ac) when keyboard HEADER view is not ready to show
2022-08-30 07:27:34.332 1247-1247/? I/GoogleInputMethodService: GoogleInputMethodService.onStartInput():2002 
2022-08-30 07:27:34.333 20891-21193/? E/ReactNativeJS: { type: 'dismiss' }

I am not that familiar with the situation but if a clean db command exists, that should be run I guess.

@mraible
Copy link
Contributor Author

mraible commented Sep 2, 2022

@pascalgrimaud
Copy link
Member

@mraible : approved

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
$$ bug-bounty $$ https://www.jhipster.tech/bug-bounties/ $500 https://www.jhipster.tech/bug-bounties/
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants