Implementing in-app oAuth flows with Ionic and Capacitor Browser

Ionic Framework
1

Are there any examples of Ionic apps that have implemented a “native” oAuth flow?

  • Click on login with X from the app
  • Open in-app browser
  • Login
  • Browser closes and user is logged in

I assumed this would be doable with the Capacitor Browser plugin, but it doesn’t seem possible to close the browser automatically once login has been completed which is a fairly important step.

I assume there must be a workaround that isn’t mentioned in the docs?

Is there a browser plugin that does allow closing the in-app browser from Android?

Any help would be greatly appreciated

2

So after some testing, I realised Capacitor Browser doesn’t share Cookies with the Native app, so it’s entirely useless in what I’m trying to do :sweat_smile:

There are oAuth providers, but my login’s use next-auth so I think I have to do this through some kind of browser… No clue how to get there.

3

Did you have any success with this auth flow?

4

Yes, but it’s definitely a hack.

iOS should work out of the box, as the in-app browser sets cookies in the app.

On Android you can set your oAuth provider to redirect back to an in app-link, specifically it has to have custom protocol like:

myapp://myapp.com/redirect/twitter

If you then open the in-app browser and successfully login, Android should try top open that link in-app which will cause your in-app browser to close and redirect to a page within your app. From there your URL will have access to all the query params set by the login provider, so you should be able to use them to retrieve the information you need from the login provider.

I’ve been writing a guide for it but don’t expect it to be out any time soon.

3 Likes