Ionic 4/Stencil PWA with Auth example/tutorial

Stencil
1

Maybe it’s too soon and there’s nothing like this out there yet, but I’d really love to see a tutorial/example of an app built with the Ionic PWA Toolkit that has auth… but not firebase/okta/other auth library.

I’ve looked at the Stencil Beer app: https://github.com/jgw96/stencil-beer – But that uses firebase, and it just shows a login screen first by default, if you go directly to other routes it doesn’t redirect to login.

I’ve read the Okta tutorial: https://developer.okta.com/blog/2018/04/16/add-auth-to-your-pwa-with-okta-and-stencil – but that uses another auth library, and I want to understand what’s going on inside better… .but this is probably the closest to what I’m looking for so far.

The app I’m creating uses the Ionic PWA toolkit with a split pane UI. But I’d like to require authentication before getting to that point. I have an existing API that I’ll be calling for authentication… so I won’t be using firebase/okta or any other auth provider. I guess my questions are: how can the user state be shared among all pages; can the auth check happen in the root component, or does it need to happen in each “page” component.

Any direction would be greatly appreciated!

Thanks,
Brian

2

Have you seen this (not the toolkit, but I imagine it might be useful): https://devdactic.com/ionic-4-login-angular/

3

I don’t understand this statement? The inner workings of your authentication service shouldn’t matter in the application, it really comes down to implementation of the service in the application

I would recommend using a state management library like ngrx or mobx, however this can also be implemented using a custom authentication provider with observables

Finally, here is some documentation on how to implement authentication guards with the stencil-router Enforce authentication for some routes · stencil-community/stencil-router Wiki · GitHub

I found that I was trying to implement something similar about 6 months ago, here is the link if it can help.

  • authentication
  • state management
  • routing with private routes
  • sorry it uses firebase
4

Thanks for the responses, can’t wait to take a look later on. As for why I said no firebase it’s just because I have to authenticate against an existing API/database. Maybe I’m misunderstanding the firebase library, can you use it to hit any oauth API server? I assumed it was only for using firebase services

Thanks again!
Brian

5

you should be wrapping the authentication, firebase or your own API, in a service so it shouldn’t matter.

1 Like
6

Thanks man, this simple comment and your example app above definitely turned the lightbulb on. I knew there would be a simple answer/approach.

As an aside, I’ve popped in and out of this community for several years… just dipping my toes in the water at each major release pretty much. You have been absolutely killing it here every time I look for help; so thank you, I seriously appreciate it