I need Help in Creating Google sign in on HTML CSS JAVACRIPT.
This is my HTML CODE -
<html>
<head>
<title>Google Auth Demo</title>
<meta name="google-signin-client_id" content="111111-not-real">
<script src ="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<h1>Welcome to the Demo</h1>
<div class="g-signin2"></div>
</body>
</html>
This is what I get when I click on open with live server -


And on Google cloud platform, for the Authorised JavaScript origins url I wrote https://localhost:5500 I'm not sure If this is correct URL Or not.

Try to regenerate the client Id and clear your cache or Here I have provided the google authentication I have used.It worked for me
App module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { FormsModule } from '@angular/forms';
import { AuthComponent } from './auth/auth.component';
import { ReactiveFormsModule } from '@angular/forms';
import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
import { GoogleLoginProvider } from 'angularx-social-login';
import { NavbarComponent } from './navbar/navbar.component';
import { MyChannelComponent } from './my-channel/my-channel.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AuthComponent,
NavbarComponent,
MyChannelComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
SocialLoginModule
],
providers: [
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(
'271611125754-vr0512mqoes0jrmhttei64vvrehragcj.apps.googleusercontent.com'
)
}
]
} as SocialAuthServiceConfig,
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
Auth.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { GoogleLoginProvider, SocialAuthService, SocialUser } from 'angularx-social-login';
import { YoutubeService } from '../youtube.service';
@Component({
selector: 'app-auth',
templateUrl: './auth.component.html',
styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {
loginForm!: FormGroup;
public socialUser!: SocialUser;
public username:any;
isLoggedin: boolean=false;
subscription:any;
constructor(private formBuilder: FormBuilder,
private socialAuthService: SocialAuthService,private service:YoutubeService) { }
ngOnInit(): void {
this.loginForm = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required]
});
this.socialAuthService.authState.subscribe((user) => {
this.socialUser = user;
this.username=this.socialUser.firstName;
this.isLoggedin = (user != null);
console.log(this.socialUser);
//this.GetChannel(this.username);
});
}
loginWithGoogle(): void {
this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID);
}
}