Breaking error in 1.11.0 - Asked for scope that doesn't exist on the resource

[im-neil]

I use remix-auth, remix-auth-microsoft, and remix-auth-oauth2 to authenticate using Office 365 in my tenant.

After updating from 1.10.0 to 1.11.0, authentication fails with the following error:

GET /auth/microsoft/callback?error=invalid_client&error_description=AADSTS650053%3a+The+application+%27test-app-microsoft%27+asked+for+scope+%27openid%2cprofile%2cemail%27+that+doesn%27t+exist+on+the+resource+%2700000003-0000-0000-c000-000000000000%27.+Contact+the+app+vendor.

[gregermendle]

I believe this is due to the latest scope change that was recently merged in. I noticed the same issue with https://github.com/pbteja1998/remix-auth-google. In that strat, the scope is added to the URL search params in authorizationParams as a set of space separated values.

For example: openid email profile

In the constructor however, the scope is stored as an array of values. Since the latest change sets the scope after authorizationParams is called, it overwrites the scope url param by setting it to an array of values. It looks like when you pass an array to URLSearchParams that you get a comma separated list and because of that you end up with a scope that is openid,email,profile. For google this looks to be invalid. ngl that took a long time to figure out.

I think the way to fix this is to just check if the params returned from authorizationParams has the scope parameter already.

 let params = new URLSearchParams(
      this.authorizationParams(new URL(request.url).searchParams),
    );
    params.set("response_type", this.responseType);
    params.set("client_id", this.clientID);
    params.set("redirect_uri", this.getCallbackURL(request).toString());
    params.set("state", state);
    if (this.scope) {
      params.set("scope", this.scope);
    }

becomes:

 let params = new URLSearchParams(
      this.authorizationParams(new URL(request.url).searchParams),
    );
    params.set("response_type", this.responseType);
    params.set("client_id", this.clientID);
    params.set("redirect_uri", this.getCallbackURL(request).toString());
    params.set("state", state);
    if (!params.has("scope") && this.scope) {
      params.set("scope", this.scope);
    }

[gregermendle]

Also for a temp fix that worked for me, just install the previous version of remix-auth-oauth2. "remix-auth-oauth2": "1.10.0"

[kwando]

Wasted a ton of time on this error too. Great.

[bluefire2121]

Thank you @gregermendle. It took me all weekend to figure out how to address this issue.