The CLEANEST authentication I've ever built with Angular

See how to deal with state management for authentication in an Angular application using some of the latest features like signals in conjunction with RxJS and many other concepts like reactive and declarative code.

0:00 Introduction
1:18 Injection tokens
1:45 Auth service
2:42 Register service
4:30 Login service
5:20 Reauthentication
6:55 @defer

#angular #rxjs #signals

[floriandesmortreux]

For me you are clearly making the kind of code you were against when I first watched you on the declative approach. You've stated multiple times through your videos that declative is when everything is in the declaration but your are now using computed values all over the place. You also have all signal being recomputed everytime a state changes and now a race condition in your code that your are proudly solving by using a timeout. This is crazy, your approach was better before, at least in my opinion

[kylerjohnson]

I get why you feel that this is a bit of an abuse for defer, but logically I agree that this is a good use case for it. Since it was announced, it felt like it was a good use case to slightly delay pieces of the UI while state “settles”. While this could always be achieved with RxJS, this definitely feels like a cleaner, simpler approach.

[qwerty-oryg]

Holy crap, the implementation, the explanation, as a noob I can say that it was really really clear and I thank you for that. Subscribed <3

[deadlyecho]

Very nice approach ❤, don't know why people think it's complex, it's pretty straightforward for me... maybe people not used to the new angular stuff yet

[timtimo]

I think the usage of defer in this case makes perfect sense. Thanks for the content, you have many interesting innovations.

[additionaddict]

Nice diagram. I like the fact the arrows don't cross

[TheAdamwest]

Thanks for the nice tutorial. I am sure it was a bunch of work to set up. I really like the declarative approach. I think some fine tuning of the nomenclature (i.e. "pending" is really more like 'ready', and 'authenticating' or 'creating' could be 'working' where the component itself provides the context to the question What is being 'worked' on?).

[infodusha]

The downside of the defer i see here is the thing that you have to use magic numbers. You newer know how long it takes angular to render the page, so assuming it as 50 ms or 200 ms (as it is in the tweet) is kinda a hardcode people normally would like to avoid.

[JCPhlux]

If you are not using firebase this is hard to adapt. Title should be "The CLEANEST Firebase authentication I've ever built with Angular"

[jlbz]

I think that NgRx Signal Store would be good in this case. Are you planning to do a video about it when it'll be released and implement it with a scenario similar to this one ?

[BrotherNifty]

using an observable stream to update a signal which triggers an effect is an interesting pattern which certainly reduces the requirement to maintain auth state in a browser or server cookie and to explicitly acquire it for every request

[maxenn]

I'm a big fan of demoing with real world examples 🔥love it 🙌
Only thing is, I think people may get confused on your use with signal effect. It was mentioned while inside one component when there's a signal change another component would react to the signal. Do you think that could make things a little murky if you need to start considering service/components life cycles relative to one another🤔 None the less this is innovation right here, keep it up!

[ilyatelefus]

@JoshuaMorony maybe you could use @placeholder, @loading blocks alongside with @defer to achieve the same result.

[iliaboico]

Can somebody help me doing this with JWT, what should be instead of with state to change user stream?

[taner-saydam]

Really interesting. I will look into this.

[DorianDragaj]

I have a question regarding the message-service.ts. There is the message$ observable, which calls the getMessages() function with a retry logic. Could'nt we add instead of the message$ an authenticate$ source that does the same? Similiar to the logout source approach? Or am I missing something out?

[GeraldScholz]

Honestly it's way to complicated.

[jycdqiq]

I don't really get how to watch user$ = authState(...) when using another backend different from Firebase. In Firebase, what is the advantage of using authState? Why not setting the Angular state by subscribing to the login, logout, etc. methods response?

[luke]

Instead of using defer, couldn’t this be solved with a third state value for auth state, to represent when you don’t know whether a user is authed or not? You’d just need thin wrapper around firebase’s auth state, and/or some rxJS default vale magic (which you are far better at than I 😄)

Why not use a resolver on the login page instead?