fixed authWithOAuth2 cancellation

Author: ganigeorgiev

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.21.4
+
+- Fixed the `requestKey` handling in `authWithOAuth2({...})` to allow manually cancelling the entire OAuth2 pending request flow using `pb.cancelRequest(requestKey)`.
+  _Due to the [`window.close` caveats](https://developer.mozilla.org/en-US/docs/Web/API/Window/close) note that the OAuth2 popup window may still remain open depending on which stage of the OAuth2 flow the cancellation has been invoked._
+
+
 ## 0.21.3
 
 - Enforce temporary the `atob` polyfill for ReactNative until [Expo 51+ and React Native v0.74+ `atob` fix get released](https://github.com/reactwg/react-native-releases/issues/287).

dist/pocketbase.cjs.d.ts

@@ -776,10 +776,31 @@ declare class RecordService<M = RecordModel> extends CrudService<M> {
      * })
      * ```
      *
-     * _Site-note_: when creating the OAuth2 app in the provider dashboard
+     * Note1: When creating the OAuth2 app in the provider dashboard
      * you have to configure `https://yourdomain.com/api/oauth2-redirect`
      * as redirect URL.
      *
+     * Note2: Safari may block the default `urlCallback` popup because
+     * it doesn't allow `window.open` calls as part of an `async` click functions.
+     * To workaround this you can either change your click handler to not be marked as `async`
+     * OR manually call `window.open` before your `async` function and use the
+     * window reference in your own custom `urlCallback` (see https://github.com/pocketbase/pocketbase/discussions/2429#discussioncomment-5943061).
+     * For example:
+     * ```js
+     * <button id="btn">Login with Gitlab</button>
+     * ...
+     * document.getElementById("btn").addEventListener("click", () => {
+     *     pb.collection("users").authWithOAuth2({
+     *         provider: "gitlab",
+     *     }).then((authData) => {
+     *         console.log(authData)
+     *     }).catch((err) => {
+     *         console.log(err, err.originalError);
+     *     });
+     * })
+     * ```
+     *
+     *
      * @throws {ClientResponseError}
      */
     authWithOAuth2<T = M>(options: OAuth2AuthConfig): Promise<RecordAuthResponse<T>>;

dist/pocketbase.cjs.js

@@ -799,10 +799,31 @@ declare class RecordService<M = RecordModel> extends CrudService<M> {
      * })
      * ```
      *
-     * _Site-note_: when creating the OAuth2 app in the provider dashboard
+     * Note1: When creating the OAuth2 app in the provider dashboard
      * you have to configure `https://yourdomain.com/api/oauth2-redirect`
      * as redirect URL.
      *
+     * Note2: Safari may block the default `urlCallback` popup because
+     * it doesn't allow `window.open` calls as part of an `async` click functions.
+     * To workaround this you can either change your click handler to not be marked as `async`
+     * OR manually call `window.open` before your `async` function and use the
+     * window reference in your own custom `urlCallback` (see https://github.com/pocketbase/pocketbase/discussions/2429#discussioncomment-5943061).
+     * For example:
+     * ```js
+     * <button id="btn">Login with Gitlab</button>
+     * ...
+     * document.getElementById("btn").addEventListener("click", () => {
+     *     pb.collection("users").authWithOAuth2({
+     *         provider: "gitlab",
+     *     }).then((authData) => {
+     *         console.log(authData)
+     *     }).catch((err) => {
+     *         console.log(err, err.originalError);
+     *     });
+     * })
+     * ```
+     *
+     *
      * @throws {ClientResponseError}
      */
     authWithOAuth2<T = M>(options: OAuth2AuthConfig): Promise<RecordAuthResponse<T>>;

dist/pocketbase.cjs.js.map

@@ -799,10 +799,31 @@ declare class RecordService<M = RecordModel> extends CrudService<M> {
      * })
      * ```
      *
-     * _Site-note_: when creating the OAuth2 app in the provider dashboard
+     * Note1: When creating the OAuth2 app in the provider dashboard
      * you have to configure `https://yourdomain.com/api/oauth2-redirect`
      * as redirect URL.
      *
+     * Note2: Safari may block the default `urlCallback` popup because
+     * it doesn't allow `window.open` calls as part of an `async` click functions.
+     * To workaround this you can either change your click handler to not be marked as `async`
+     * OR manually call `window.open` before your `async` function and use the
+     * window reference in your own custom `urlCallback` (see https://github.com/pocketbase/pocketbase/discussions/2429#discussioncomment-5943061).
+     * For example:
+     * ```js
+     * <button id="btn">Login with Gitlab</button>
+     * ...
+     * document.getElementById("btn").addEventListener("click", () => {
+     *     pb.collection("users").authWithOAuth2({
+     *         provider: "gitlab",
+     *     }).then((authData) => {
+     *         console.log(authData)
+     *     }).catch((err) => {
+     *         console.log(err, err.originalError);
+     *     });
+     * })
+     * ```
+     *
+     *
      * @throws {ClientResponseError}
      */
     authWithOAuth2<T = M>(options: OAuth2AuthConfig): Promise<RecordAuthResponse<T>>;

dist/pocketbase.es.d.mts

@@ -776,10 +776,31 @@ declare class RecordService<M = RecordModel> extends CrudService<M> {
      * })
      * ```
      *
-     * _Site-note_: when creating the OAuth2 app in the provider dashboard
+     * Note1: When creating the OAuth2 app in the provider dashboard
      * you have to configure `https://yourdomain.com/api/oauth2-redirect`
      * as redirect URL.
      *
+     * Note2: Safari may block the default `urlCallback` popup because
+     * it doesn't allow `window.open` calls as part of an `async` click functions.
+     * To workaround this you can either change your click handler to not be marked as `async`
+     * OR manually call `window.open` before your `async` function and use the
+     * window reference in your own custom `urlCallback` (see https://github.com/pocketbase/pocketbase/discussions/2429#discussioncomment-5943061).
+     * For example:
+     * ```js
+     * <button id="btn">Login with Gitlab</button>
+     * ...
+     * document.getElementById("btn").addEventListener("click", () => {
+     *     pb.collection("users").authWithOAuth2({
+     *         provider: "gitlab",
+     *     }).then((authData) => {
+     *         console.log(authData)
+     *     }).catch((err) => {
+     *         console.log(err, err.originalError);
+     *     });
+     * })
+     * ```
+     *
+     *
      * @throws {ClientResponseError}
      */
     authWithOAuth2<T = M>(options: OAuth2AuthConfig): Promise<RecordAuthResponse<T>>;

dist/pocketbase.es.d.ts

@@ -776,10 +776,31 @@ declare class RecordService<M = RecordModel> extends CrudService<M> {
      * })
      * ```
      *
-     * _Site-note_: when creating the OAuth2 app in the provider dashboard
+     * Note1: When creating the OAuth2 app in the provider dashboard
      * you have to configure `https://yourdomain.com/api/oauth2-redirect`
      * as redirect URL.
      *
+     * Note2: Safari may block the default `urlCallback` popup because
+     * it doesn't allow `window.open` calls as part of an `async` click functions.
+     * To workaround this you can either change your click handler to not be marked as `async`
+     * OR manually call `window.open` before your `async` function and use the
+     * window reference in your own custom `urlCallback` (see https://github.com/pocketbase/pocketbase/discussions/2429#discussioncomment-5943061).
+     * For example:
+     * ```js
+     * <button id="btn">Login with Gitlab</button>
+     * ...
+     * document.getElementById("btn").addEventListener("click", () => {
+     *     pb.collection("users").authWithOAuth2({
+     *         provider: "gitlab",
+     *     }).then((authData) => {
+     *         console.log(authData)
+     *     }).catch((err) => {
+     *         console.log(err, err.originalError);
+     *     });
+     * })
+     * ```
+     *
+     *
      * @throws {ClientResponseError}
      */
     authWithOAuth2<T = M>(options: OAuth2AuthConfig): Promise<RecordAuthResponse<T>>;

dist/pocketbase.es.js

@@ -1,5 +1,5 @@
 {
-    "version": "0.21.3",
+    "version": "0.21.4",
     "name": "pocketbase",
     "description": "PocketBase JavaScript SDK",
     "author": "Gani Georgiev",