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:
- New Safari window opens.
- User is prompted to select a Google account (or enter their username/password if they aren’t already logged into Google).
- User is prompted to allow Google calendar access.
- 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
- 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.
