SIMPLE GUIDE

Google authentication in Angular

Let the users sign in with their Google account to your Angular application

Login with any Google account

In order to just illustrate the functionality of signing in with Google, we create a new Angular app from scratch and generate two components:

• login component
• main page component (will be protected by google authentication)

Get Google OAuth key

We will do some necessary and simple steps in your Google account in order to get the OAuth key and enable the login function for your app. You can use your own Google account or create a new account for this.

Go to the google development console and sign in. In the dashboard you should create new project, where you fill out name of application and few other fields.

create a new project

Next, go to the credentials tab and add your application base path for local environment as well as for your production environment. Here we have only added localhost.

Then press “create” and copy your client id from the popup window.

Install the Angular Social Login dependency

Next step we have to do is to install the social login npm package with simple command:

npm i angularx-social-login

Configure app.module.ts

The most important is in app.module under providers, where we have to define the SocialAuthServiceConfig.

By the way, you can add Facebook and Amazon sign in functionality there just by getting the respective API key and providing FacebookLoginProvider or AmazonLoginProvider the same way as the GoogleLoginProvider here.

Login component

You can use any login form you wish, but the essential part of it is the “google login” button, which we will describe here.

Download any square Google logo from the Internet and put it into your src/assets folder. There is the full example with the login form and CSS styles.

The next step is to inject the SocialAuthService and Router in the constructor of your login component, and call the signIn method.

This opens a Google login page and then redirects back to your application, where the Promise resolves with a SocialUser and in then() you can navigate wherever you want. Here, we navigate to the main page.

Accessing users name and email

Furthermore we can access users email, name and other properties, which are saved in the authState of SocialAuthService, as long as the user is signed in. To illustrate this point we access it in the main page component:

Filtering unauthorized users

In order to ensure, that only logged in users are allowed to access the main page route, we should create a route guard. This is simply a service which implements CanActivate interface.

It checks if the authState observable has the social user, and if not — redirects to the login page and returns false, which means that user is not allowed to access the protected route

In your route configuration you should add this guard to the routes, that you want to secure:

RouterModule.forRoot([
    {path: ‘login’, component: LoginComponent},
    {path: ‘mainpage’, component: MainPageComponent, canActivate:             [AuthGuardService]},
    {path: ‘**’, component: LoginComponent}
 ])

That’s it! You can find a full example here:

dnlrbz/social-login