Google sign in not working with Angular SSR Build

Question

I am building angular's SSR build but in production it shows 'gapi is not defiled', even though I decalred gapi and put check for gapi inside interval. How can I make it work?

Putting gapi check inside interval

gapi.load('auth2', () => { the client.
      gapi.auth2.init({
        client_id: clientID,
        cookiepolicy: 'single_host_origin',
        // Request scopes in addition to 'profile' and 'email'
        //scope: 'additional_scope'
      }).attachClickHandler()
})

Answer 1

This might look like Server Side Rendering works with services that execute http calls, but not with the services that execute https calls just like your Google authentication api. But there is nothing such an issue.

What SSR does is that it compiles your static html code for a specific page over the Node.js Express server. When this is done it targets a new port over your localhost that is different from what it was targeting during JIT or AOT compilation.

If you look into your server.ts(formed when you added the Express engine to your project) you will see,

const PORT = process.env.PORT || 4000;

this shows that the node express engine listens over port 4000 by default. But the client id that you received from Google API Console is whitelisted only for the '4200' port(or any custom port if specified), therefore the client id that authenticates your application might not work on port 4000.

In order to solve this problem change the port in server.ts file to 4200 (or any other custom port specified by you for your application).

Hope this might help. (: