Simplify the OAuth2 authentication flow

[ganigeorgiev]

PocketBase uses the OAuth2 PKCE flow but due the stateless nature of the application and the requirement to support multiple platforms (web, android, ios, etc.) in a similar manner, the current implementation is a little verbose and some users have reported to find it cumbersome to implement in their app (see existing Auth via OAuth2 guide).

Further more, the current approach has one more drawback - it will not work out of the box with platforms that may not support redirect urls or deep links (eg. AdobeXD and Figma plugins; check similar issue in Presentator #178)

The best solution that I can think of at the moment would be to start a persistent connection (eg. SSE) with the client and handle everything in a single call without even reload to be necessary, eg. for web platforms using the JS SDK it could look like this:

client.Users.authViaOAuth2(
  "google",
  function (googleLoginUrl) {
    // open in a popup window or a new tab
    window.open(googleLoginUrl, "_blank");
  },
  function (authData) {
    // success callback...
  }
)

Feedback and suggestions for other approaches are welcomed.

This currently is a low priority, but we'll have to decide on the implementation before v1.0.0 to avoid introducing breaking changes.

[burggraf]

Low priority, agreed, but if this works, it'll simplify the OAuth workflow and provider a better DX. Cool.

[Glukoosi]

This would be a good addition since it seems like it is not possible to get redirect url to work with svelte-spa-router or other spa routers (as you stated at the issue).

[jjmountain]

Could we also have a way to add access scopes as URL parameters as part of the redirect URL?

Currently I'm having to do this in my code:

if (provider.name === "google") {
      const updatedUrl = new URL(authUrl);

      const googleOAuthScopes = [
        "https://www.googleapis.com/auth/userinfo.email",
        "https://www.googleapis.com/auth/userinfo.profile",
        "https://www.googleapis.com/auth/forms.currentonly"
      ];
      const revisedScopes = googleOAuthScopes.join(" ");

      updatedUrl.searchParams.delete("scope");
      updatedUrl.searchParams.append("scope", revisedScopes);
      updatedUrl.searchParams.delete("redirect_uri");
      updatedUrl.searchParams.append("redirect_uri", "");
      authUrl = updatedUrl.toString();
    }

[hungcrush]

handle everything in a single call without even reload

Wow, it would be really nice to have..

[ganigeorgiev]

A simplified OAuth2 handling was implemented in the develop branch and it will be available with the next PocketBase v0.15.0 release.

The JS SDK was also updated to accommodate the change and if you want to test you have to use v0.14.0-rc2 of the JS SDK or its develop branch:

const authData = await pb.collection("users").authWithOAuth2({
   provider: "google",

  // custom scopes to overwrite the default ones
  // scopes?: Array<string>;

  // optional record create data
  // createData?: {[key: string]: any};

  // optional callback that is triggered after the OAuth2 sign-in/sign-up url generation
  // urlCallback?: OAuth2UrlCallback,
})

This method initializes a one-off realtime subscription and will open a popup window with the OAuth2 vendor page to authenticate.
Once the external OAuth2 sign-in/sign-up flow is completed, the popup window will be automatically closed and the OAuth2 redirect data proxied back to the user through the previously established SSE connection.

Site-note: when creating the OAuth2 app in the provider dashboard you have to configure https://yourdomain.com/api/oauth2-redirect as redirect URL.

The "manual" code exchange flow is still supported as authWithOAuth2Code(provider, code, codeVerifier, redirectUrl).
For backward compatibility it is also available as soft-deprecated function overload of authWithOAuth2(provider, code, codeVerifier, redirectUrl).

The Dart SDK will be updated similarly sometime later today.