Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – correct way to implement google login

As I was researching ways to integrate google login to my app, I found several different ways:

  1. gapi (js library, deprecated), Google’s lib
  2. GIS(or GSI, Google Identity Services, new google SDK over gapi’s deprecation)
  3. Although this articles says Oauth2 implemention doesn’t affect
    the deprecation in google js library, it seems to be pointing to
    gapi’s repository
  4. Third party libraries like next-auth, passport
  5. Hosted services like clerk and keycloak

With all these options at hands, I’m not very sure what would be the best choice to implement. No. 1(due to deprecated) and 5(for large customizable apps) are not my choices.
So, I’m wondering between GIS and Third party libs, owing to the confusion added atop by no. 3.

I’m wondering if these libraries internally had integrated Gapi, since it appears to be the oauth2.0 libraries that google had published and hence these libs might all be deprecated, or they’d upgrade to GIS in which case we don’t need these libraries?

What would be the rationale to choose between these two approaches? Whether to integrate a google made sdk/lib or a third party lib? And how would I know if the libs have updated to google’s new policies and gapi’s deprecation if they’d used it?

Edit: Also, wonder if these libraries would support the FedCM , which they state to be crucial after the third party cookie migration. It does seem looking at their source code, they use one lib called oauth4webapi for next/auth’s implementation( maybe others as well?) , yet I can’t seem to find anything mentioning FedCM in their docs. Similar stuff goes for passport-js‘s oauth implementation
(I believe uses oauth , last published 2 years ago)

Tags:

2

Answers


  1. 0

    You can add next-auth only in the next project and passport for server authentication. clerk and kinde are good options that they can integrate with different auth providers, not only google.

    if you are only focusing google auth try this npm @react-oauth/google

    https://blog.logrocket.com/guide-adding-google-login-react-app/

    Login or Signup to reply.
  2. 0

    With so many ways to integrate Google Login, it can be hard to choose. Here’s a brief guide:

    Options:

    1. Google Identity Services (GIS): This is Google’s new official SDK. It’s always up-to-date and secure.
    2. Third-Party Libraries: e.g., next-auth, passport – These simplify the process and offer multi-provider support; however, they rely on third-party maintenance.

    Recommendations:

    • Use GIS if you require the most secure and up-to-date integration directly from Google. This is the best way to go if you are looking at only Google Login.
    • Use next-auth or passport if an easier setup and more flexibility to add other login methods in the future.

    Example with next-auth

    1. Install next-auth 
      npm install next-auth
    2. Configure next-auth in `pages/api 
      import NextAuth from 'next-auth
import GoogleProvider from 'next-auth/providers

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
});
    3. Add your Google credentials to .env: 
      GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

    FedCM Support:

    • GIS would support FedCM as it’s an initiative by Google.

    You will have to look at the repositories for next-auth and passport to see if or when they will be updated with FedCM support. They may take a bit of time to catch up with these changes.

    Final Thoughts:

    • GIS is really for security and keeping up with Google’s policies.
    • Next-auth is awesome, easy to use, and highly flexible.

    Hope this helps! Let me know if you have more questions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search