How Sign in with Google and angular version 14 web app works together?

1.4k views Asked by At

Google got a java script url for sign in with Google, But how do you load this in angular web app? The html code below does not show Login with google button.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-login_uri="https://your.domain/your_login_endpoint"
         data-auto_prompt="false">
      </div>
      <div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
      </div>
  </body>
</html>

Here is the sign in with google doc https://developers.google.com/identity/gsi/web/guides/client-library

Could anyone help, as I am not in frontend development?

The angularx-social-login library dose not work with angular version 14. It has been deprecated by google itself, here is the error message

"You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the [Migration Guide](https://developers.google.com/identity/gsi/web/guides/gis-migration) for more information."

See the attached screen enter image description here

1

There are 1 answers

0
Alain Boudard On

you probably want to use a third party Angular compatible library, and not the original .js files. Here is an article about such integration : https://medium.com/@danilrabizo/google-authentication-in-the-angular-application-e86df69be58a

You also can use Firebase as such a library to give both oAuth and basic authent to your users :

https://firebase.google.com/docs/auth/web/google-signin

Cheers !