Login to PWA on iOS Using Social Identity Provider

[royce]

SDK/Library: Auth0 Lock (auth0-lock v11.11)

Question

How can I log in via Auth0 Lock using a social identity provider while maintaining my progressive web app (PWA) in standalone display mode?

Background

Creating a PWA using Angular 7. By PWA in standalone mode, I mean that users may choose to add my app to their home screens, where my manifest.json file dictates that the application be displayed in standalone mode. The social identity provider I’m using is Google and I’m additionally requesting calendar access via the Auth0 social connections options.

On iOS, after adding my PWA to the home screen, opening it, and choosing to log in with Google, the following occurs:

1. New Safari window opens.
2. User is prompted to select a Google account (or enter their username/password if they aren’t already logged into Google).
3. User is prompted to allow Google calendar access.
4. User is redirected to domain with the following format: https://[MY CUSTOM DOMAIN]/login/callback?state=XXXX&scope=email%20profile%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20https://www.googleapis.com/auth/calendar
5. Safari remains open at this URL with a blank page. The window does not close and the user is not redirected back to the standalone PWA.

Currently able to log in with Google on:

• Desktop browsers (Chrome, Firefox, Safari).
• Android (i.e., I’ve added the app to my homescreen, opened it, and logged in while still in standalone mode).
• iOS Safari NOT in standalone mode (through the browser).

Able to log in with username and password (with auth0 as the identity provider) on all platforms. No issues with maintaining standalone mode when auth0 is the IdP.

Current Settings

Auth0 application settings

Using a custom domain (which is on the same domain as my app).
Allowed callback URLs and allowed web origins include the domains for both my custom domain and my application in the following formats:

Application: https://app.northwind.com
Custom domain: https://auth.northwind.com

Google Developers Console

Added https://[MY CUSTOM DOMAIN]/login/callback to the Google Developers Console settings.

Lock configuration

lock = new Auth0Lock('MY CLIENT ID',  'MY CUSTOM DOMAIN', {
    auth: {
      responseType: 'token',
      audience: environment.auth.audience,
      redirect: false,
      params: {
        scope: environment.auth.scope,
        accessType: 'offline',
        approvalPrompt: 'force'
      }
    },
    languageDictionary: this.languageDictionary,
    initialScreen: 'login',
    autoclose: true,
    configurationBaseUrl: 'https://cdn.auth0.com',
    overrides: {
      __tenant 'MY TENANT',
      __token_issuer: 'MY CUSTOM DOMAIN'
    }
  });

If you need further information to help me troubleshoot this, please let me know! Thank you for any and all help you can provide! Additionally, if anyone is struggling with Lock in their PWA, I’m happy to offer what help I can.

Please note that I did initially use Universal Login. I found that on iOS Safari, this simply redirected the user to their browser, where they logged in and used the app – meanwhile, the original standalone PWA remained open in the background. I decided to use Lock as a way to keep the user in the standalone PWA on iOS. Not ideal, but until PWA support for Safari improves, it looks like that’s the only option.

[mike9]

Have you had any luck with this? Am going through the same issues. For anyone else reading… we cannot use postMessage API to fix this as Safari sandboxes PWAs from browsers. There’s also another issue: 185400 – Apps added to home screen lose context when multitasking and reload whereby PWA state is cleared when multitasked.

[royce]

Hey Mike. I haven’t entirely solved this problem. But I found this issue on github very helpful. From what I can gather, Safari’s sparse support of manifest.json is to blame – try using PWA Compat with the changes in the previously linked issue. Using pwacompat.js (with the outlined changes) allowed me to successfully login with Google as the social provider while maintaining the app in standalone mode .

That being said, I’m having some trouble using my Google access_token. Specifically, I’m receiving a CORS error:

“…blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”

However, if you don’t need access to Google APIs, then using pwacompat.js (with the slight customization outlined in issue #77) should solve your problem.

Hope this helps.

[royce]

Hey Mike. I haven’t entirely solved this problem. But I found this issue on github very helpful. From what I can gather, Safari’s sparse support of manifest.json is to blame – try using PWA Compat with the changes in the previously linked issue. Using pwacompat.js (with the outlined changes) allowed me to successfully login with Google as the social provider while maintaining the app in standalone mode .

That being said, I’m having some trouble using my Google access_token. Specifically, I’m receiving a CORS error:

“…blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”

However, if you don’t need access to Google APIs, then using pwacompat.js (with the slight customization outlined in issue #77) should solve your problem.

Hope this helps.

EDIT (correction to above quote): Now able to access user Google APIs using the access/refresh tokens supplied when user logs in using Google as the social IdP. The previous problem was caused by an unrelated, erroneous environment variable. So using pwacompat.js should solve your problem. Let me know if you would like further assistance.

[mike9]

Thanks for the quick reply royce! This is working for me now but I’m so skeptical! I feel like this is making iOS not treat it as a true PWA so am wondering if any PWA features are now not working. Will let you know if I notice anything odd

[royce]

No problem, Mike. Happy to help. Yes, if you notice anything odd please let me know – I’ll do the same.

Unfortunately, this was the only solution I found that worked for iOS. Apple just isn’t quite there yet with PWA support, but I predict they’ll get more aggressive about it as more people start seeing the opportunity to avoid the App Store (and its 30% charge on in-app purchases).

Best of luck.

[konrad.sopala]

Thanks a lot guys for mutually sharing the knowledge! Teamwork makes the dreamwork!

[royce]

Happy to help Konrad. Happy holidays.

[konrad.sopala]

Thank you and you too!