The CLEANEST authentication I've ever built with Angular

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?

i think the registration should not automatically login a user. unfortunately the user gets authenticated automaticall on user creation by firebase resulting in the redirect t the home page.
If we would want to handle this solely on client-side, think the better approach would be to directly logout the user after the registration succeeded (and after one has performed other operations like sendEmailVerification) and then redirect him to the login page.
What do you think ?

Why not use a resolver on the login page instead?

haha, I see you've used 'firebase' and not '@angular/fire' as the later still doesn't have zoneless support. 😢

how can I use rxfire?

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?

Hello, I've implemented phone authentication with Firebase, and I'm encountering an error stating "Component.auth is not registered yet." in the live/production environment. Interestingly, everything functions flawlessly in the test/development setting. Despite using identical keys and setup for both environments, the issue persists exclusively in the live/production environment. I would appreciate any assistance or suggestions. Below are the details of the packages I'm using: "dependencies": {
"@abacritt/angularx-social-login": "^1.2.5",
"@angular/animations": "^14.2.0",
"@angular/common": "^14.2.0",
"@angular/compiler": "^14.2.0",
"@angular/core": "^14.2.0",
"@angular/fire": "^7.6.1",
"@angular/forms": "^14.2.0",
"@angular/platform-browser": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/router": "^14.2.0",
"firebase": "^10.8.0",
"flag-icons": "^7.1.0",
"jspdf": "^2.5.1",
"lodash": "^4.17.21",
"moment": "^2.29.4",
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.11",
"@angular/cli": "~14.2.11",
"@angular/compiler-cli": "^14.2.0",
}

Thank you

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

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?).

Really bad use of rxjs, you just started the development and it's already impossible to understand the behavior of the system, only the person who wrote it can understand, I suggest you take someone who hasn't seen the video and try to understand something, it will take him a hundred times longer than if you were Write it linearly, write linearly, "I clicked here... it happened like this.... ....sad.

Personal opinion only, good code is code that my grandmother sees (and she doesn't develop) and can understand.

Please use canMatch instead canActivate, canActivate is too late to decide to re-navigate to another route

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

I have a big concern about a lot of these techniques using Signals. I love the power, but I fear the lack of Discoverability. One really big thing the full NgRx Redux solution has going for it, is you can find all logic and side-effects inside effects files. With many of the techniques you display here, it looks like we can tuck functionality super deep in some file that affects the entire app, like navigating to the home page, etc. This reminds me of why I stopped liking jQuery back in the day and started hating it - we had some functionality tucked away seven folders deep in some ridiculously obscure file that caused all links in the app to stop working. I realize with great power comes great responsibility, but we all know that junior developers will inevitably abuse that power in incredibly hard to find places. I'd love to hear your thoughts on how to address Discoverability with being able to listen to a Signal anywhere and affect global change within the app... from anywhere.

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

Great stuff josh, what is the theme you are using for your IDE?

I love your videos, but i hate when people do something like this with Firebase when in reality not many people use it. Maybe make another video like this but with simple json server ?

Sorry if my question is a nooby one but here it is : As newcomer in Angular, I tried to find the best practices of 2023 to start working with it. I watched all of your previous videos and came with the conclusion that I need to understand concepts of RxJs, NgRX and signals. But with this new video, I don’t really see where I can put the NgRX pattern in it. If I understood this video you are using signals for the state management which is also a dedicated task of the NgRX pattern. Do we still need to implement NgRX ? Could you clarify this so that I can apply better code architecture and methodology in my future developments ? Thanks.

Why are you using defer() inside from()? Doesn't defer() already returns an observable without executing the promise until subscribed? I mean, I don't see the point on using from() operator

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.

Not a clean approach logics are in the components

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!

why do you use auth in injectiontoken? why not a simple function, could you explain me that part? why should be the difference between both approach?

Just wondering, how are you maintaining a login session?
I see that there's no local storage/session storage used

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

You are using a cannon to kill a bug😂whathever happened to a simple form and JavaScript 😂

Too much complexity for the very basic thing

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

Resolver? Instead of defer

Been away from Angular since v10. Any specific videos of yours to catch up on what's new, especially since v16?

About the defer thing: I usually handle auth-checking in the APP_INITIALIZER function, so I have all the required data in state before the application rendering. This usage of @defer seems a biit "hacky" for me.

Honestly it's way to complicated.

Yeah, the defer method smells like a hack, but I have no idea of a better solution.

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

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

BY YOUR POWERS COMBINED

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

The Firebase Auth is slow and this is known by Firebase Team. They suggested in one of their conferences to use local storage to save the auth state. I tried to solve with artificial delays too, but that doesn’t provide a good user experience, because the Firebase Auth may return after a minute or two that user is successfully authenticated. Good video as always 👍

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 😄)

There will come a time when only 1 or 2 people in the galaxy will understand angular, what a mess to do something so trivial, and angular doesn't look like javascript at all

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 ?

excellent as always, fellow josh!

Really interesting. I will look into this.

In some ways much nicer than imparitive, but it is missing a few key elements I am sort of mentioning below.
Would it be easy to timeout a user if they have not done anything during the session for some time? This should be easish to login/reauth, would just need to think about it more.
There is also a question in SSO realms, but will leave it do to I do not want to explain.

Love it

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.

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

You have a real hard on for firestore don't you xD ?

Can you please,upload from the starting to end

Bro, I love your content where can I find the source code?
I'm trying to learn TDD in angular do you know a good content that I could use?