How to add SSO (Google + Microsoft) to an Android/iOS app generated by Ionic + Angular?

Ionic Framework
1

Hello Ionic community!

With my team we’re trying to add a login with Google and Microsoft to an Android and iOS apps generated by Ionic + Angular. We’ve our own backend in NodeJS that handles the task in our web application by redirecting the user and checking for Google or Microsoft credentials (so we know that the user was authenticated by a third party).

Some specifications of our frontend stack:

  • Angular 16
  • Ionic 7
  • Capacitor/core 5

What we tried so far:

  1. The first reflex was to try and use the same implementation that we use in the web version of the app. This doesn’t work because the user would open the link with an external browser and when the authentication is completed we will redirect to an url instead of the app that called the authentication.
  2. So we tried to use a InAppBrowser to solve this issue and when using MSAL and following this thread but doing so causes the next exception: NullInjectorError: R3InjectorError(LoginPageModule)[[object Object] -> [object Object] -> [object Object]]: NullInjectorError: No provider for [object Object]!
  3. We’re currently trying to apply a solution with DeepLinks so the user is redirected to the external browser to be authenticated and we intercept the deeplink to bring they back to the application but I’m not sure if that could work as expected.

Any thoughts on the matter? Thanks in advance!

1 Like
2

#3 is how it should be done and your best bet in conjunction with #1.

1 Like