jhipster / generator-jhipster-react-native

A React Native blueprint for JHipster
https://jhipster-sample-app-react-native.vercel.app/
Apache License 2.0
263 stars 54 forks source link

Login Failure with Keycloak and TypeError: AuthSession.startAsync in JHipster React Native App #1518

Closed yuchilai closed 4 months ago

yuchilai commented 9 months ago

Describe the bug

Mention the specific scenario in which the bug occurs (e.g., during login with Keycloak in dev mode).

Instructions To reproduce

folder ├── SampleApp └── backend

  1. Run JHipster in the backend folder to generate a full-stack JHipster project.
  2. Move to a different folder and run rnhipster.
  3. Name the React Native application "RnApp".
  4. Set the JHipster app directory to "../backend".
  5. Opt not to enable end-to-end tests with Detox.
  6. Modify the CORS configuration in the application by adding http://localhost:19006 and http://localhost:8081 to the list of allowed origins. The updated CORS configuration is as follows:
    
    cors:
    # Allow Ionic for JHipster by default (* no longer allowed in Spring Boot 2.4+)
    allowed-origins: 'http://localhost:8100,https://localhost:8100,http://localhost:9000,https://localhost:9000,http://localhost:9060,https://localhost:9060,http://localhost:19006,http://localhost:8081'
    # Enable CORS when running in GitHub Codespaces
    allowed-origin-patterns: 'https://*.githubpreview.dev'
    allowed-methods: '*'
    allowed-headers: '*'
    exposed-headers: 'Authorization,Link,X-Total-Count,X-${jhipster.clientApp.name}-alert,X-${jhipster.clientApp.name}-error,X-${jhipster.clientApp.name}-params'
    allow-credentials: true
    max-age: 1800

7. Navigate to the React Native application's directory and run npm start.
8. Press 'w' to open the application in a web browser.
9. Attempt to log in, but encounter a failure with the error message displayed in the console: "TypeError: AuthSession.startAsync is not a function at [...stack trace details...]" 

<!-- Please add steps to reproduce the error -->

**JHipster app's `.yo-rc.json`**

INFO! Switching to JHipster installed locally in current project's node repository (node_modules)

        ██╗ ██╗   ██╗ ████████╗ ███████╗   ██████╗ ████████╗ ████████╗ ███████╗
        ██║ ██║   ██║ ╚══██╔══╝ ██╔═══██╗ ██╔════╝ ╚══██╔══╝ ██╔═════╝ ██╔═══██╗
        ██║ ████████║    ██║    ███████╔╝ ╚█████╗     ██║    ██████╗   ███████╔╝
  ██╗   ██║ ██╔═══██║    ██║    ██╔════╝   ╚═══██╗    ██║    ██╔═══╝   ██╔══██║
  ╚██████╔╝ ██║   ██║ ████████╗ ██║       ██████╔╝    ██║    ████████╗ ██║  ╚██╗
   ╚═════╝  ╚═╝   ╚═╝ ╚═══════╝ ╚═╝       ╚═════╝     ╚═╝    ╚═══════╝ ╚═╝   ╚═╝
                            https://www.jhipster.tech
Welcome to JHipster v7.9.4

Welcome to the JHipster Information Sub-Generator

##### **JHipster Version(s)**

backend@0.0.1-SNAPSHOT /Users/yuchilai/Projects/Testing/react-react-native/passme/backend └── generator-jhipster@7.9.4



##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**

<details>
<summary>.yo-rc.json file</summary>
<pre>
{
  "generator-jhipster": {
    "applicationType": "monolith",
    "authenticationType": "oauth2",
    "baseName": "backend",
    "blueprints": [],
    "buildTool": "maven",
    "cacheProvider": "redis",
    "clientFramework": "react",
    "clientPackageManager": "npm",
    "clientTheme": "none",
    "clientThemeVariant": "",
    "creationTimestamp": 1703096488902,
    "cypressAudit": true,
    "cypressCoverage": null,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "devServerPort": 9060,
    "dtoSuffix": "DTO",
    "enableGradleEnterprise": false,
    "enableHibernateCache": true,
    "enableSwaggerCodegen": true,
    "enableTranslation": true,
    "entities": ["Region", "Country", "Location", "Department", "Task", "Employee", "Job", "JobHistory"],
    "entitySuffix": "",
    "jhiPrefix": "jhi",
    "jhipsterVersion": "7.9.4",
    "languages": ["en", "al"],
    "lastLiquibaseTimestamp": 1703098214000,
    "messageBroker": false,
    "microfrontend": false,
    "microfrontends": [],
    "nativeLanguage": "en",
    "otherModules": [],
    "packageName": "com.mycompany.myapp",
    "pages": [],
    "prodDatabaseType": "mysql",
    "reactive": false,
    "searchEngine": false,
    "serverPort": "8080",
    "serverSideOptions": ["websocket:spring-websocket", "enableSwaggerCodegen:true"],
    "serviceDiscoveryType": "no",
    "skipCheckLengthOfIdentifier": false,
    "skipClient": false,
    "skipFakeData": false,
    "skipUserManagement": true,
    "testFrameworks": ["cypress", "gatling", "cucumber"],
    "websocket": "spring-websocket",
    "withAdminUi": true
  }
}

</pre>
</details>

##### **JDL for the Entity configuration(s) `entityName.json` files generated in the `.jhipster` directory**

<details>
<summary>JDL entity definitions</summary>

<pre>
entity Region {
  regionName String
}
entity Country {
  countryName String
}
/**
 * not an ignored comment
 */
entity Location {
  streetAddress String
  postalCode String
  city String
  stateProvince String
}
entity Department {
  departmentName String required
}
/**
 * Task entity.\n@author The JHipster team.
 */
entity Task {
  title String
  description String
}
/**
 * The Employee entity.
 */
entity Employee {
  /**
   * The firstname attribute.
   */
  firstName String
  lastName String
  email String
  phoneNumber String
  hireDate Instant
  salary Long
  commissionPct Long
}
entity Job {
  jobTitle String
  minSalary Long
  maxSalary Long
}
entity JobHistory {
  startDate Instant
  endDate Instant
  language Language
}
enum Language {
  FRENCH,
  ENGLISH,
  SPANISH
}

relationship OneToOne {
  Country{region} to Region
  Location{country} to Country
  Department{location} to Location
  JobHistory{job} to Job
  JobHistory{department} to Department
  JobHistory{employee} to Employee
}
relationship OneToMany {
  /**
   * A relationship
   */
  Department{employee} to
  /**
   * Another side of the same relationship
   */
  Employee{department}
  Employee{job} to Job{employee}
}
relationship ManyToOne {
  Employee{manager} to Employee
}
relationship ManyToMany {
  Job{task(title)} to Task{job}
}

service Region, Country, Location, Department, Task, JobHistory with serviceImpl
paginate Employee, JobHistory with infinite-scroll
paginate Job with pagination

</pre>
</details>

##### **Environment and Tools**

openjdk version "17.0.9" 2023-10-17
OpenJDK Runtime Environment Temurin-17.0.9+9 (build 17.0.9+9)
OpenJDK 64-Bit Server VM Temurin-17.0.9+9 (build 17.0.9+9, mixed mode)

git version 2.43.0

node: v16.20.2

npm: 8.19.4

Docker version 24.0.7, build afdd53b

Docker Compose version v2.23.3-desktop.2

No change to package.json was detected. No package manager install will be executed.
Congratulations, JHipster execution is complete!
Sponsored with ❤️  by @oktadev.

<!-- Please include your JHipster app's .yo-rc.json file to make reproducing the issue simple  -->

**Entity JDL or JSON files**

<!-- If your bug relates to entities, please include your JDL file or the entity JSON that will reproduce the issue  -->

**Versions (please complete the following information):**

- JHipster React Native Version: generator-jhipster-react-native@4.4.0
- `jhipster info` output:
mshima commented 4 months ago

Needs to be reimplemented. Example: https://gist.github.com/lemmensaxel/72ece5cd00026cc05888701d7d65fbe0

mraible commented 4 months ago

Added a bug bounty since this isn't as simple as changing a method name.