[Solved] Angular SocialX login showing even when user is authenticated.

I was adding third party authentication to my application, and I found a plugin which looked to solve the problem. Its located here and seems very popular:

abacritt/angularx-social-login: Social login and authentication module for Angular 17 (github.com)

Great! I set it up, and it worked! The only frustrating thing was that the plugin would show the social login even if I was logged in… After some digging, I came across a great post here https://github.com/abacritt/angularx-social-login/issues/768 which essentially outlined the following:

1. The plugin doesn’t seem to have any mechanism to show or hide the login modal programmatically.
2. When the login plugin is put on the page, it will fire of a request to authenticate, regardless of if the user is logged in.

With those two things in mind, I began the following changes:

1. Create an external auth component, the responsibility of this component is to only trigger the login, make sure that this component it is the only component that references the angularx-social-login library.
2. Test this out by placing it on the app page. If it is on the page, you should get a request to login, if you remove it, you should not see the request.
3. Make sure you have an auth service that tracks the auth state of your application.
4. Use this auth state to show or not show the external login component on your page.

With all of this implemented, you should be able to login using external login, refresh the page, and the login should not pop up. If you log out again, and change the auth state to false, the login should show.

Let me know if this helps, or if you need more explanation.