How to Set Up the New Google Auth in a React and Express App

This article demonstrates how to integrate the new Google Sign-In button into a React.js and Express.js application. The updated "Sign in with Google" button, utilizing Google's Identity Services SDK, offers a streamlined and more secure authentication experience compared to the deprecated JavaScript library. This improved method includes features like profile picture previews for account selection and One Tap login.

Key Features:

• Simplified Google Auth: This guide simplifies the integration of the new Google Sign-In button in React and Express applications, emphasizing the ease of use and security enhancements.
• Step-by-Step Implementation: The article provides a detailed walkthrough, covering all steps from generating Google Client ID and Secret to handling authentication on both client and server sides. Code snippets are included for clarity.
• Complete Solution: The tutorial provides links to the full source code for both server and client implementations.

Setting Up Google Credentials:

1. Google Cloud Console: Access the Google Cloud Console.
2. New Project: Create a new project (e.g., connect-google-auth-2024).
3. OAuth Consent Screen: Configure the OAuth consent screen, providing app details (name, email, logo). Remember to replace placeholder URIs with your actual domain when deploying.
4. Credentials: Create OAuth 2.0 Client ID with "Web application" type. Add http://localhost and http://localhost:3000 as Authorized redirect URIs (replace with your production domain later).
5. Download Credentials: Download or copy your Client ID and Secret.

React App Setup:

Create a React app using Create React App or Vite. Install @react-oauth/google:

npm install @react-oauth/google

Express Server Setup:

Create a server folder and install these packages:

npm install express cors dotenv google-auth-library jsonwebtoken nodemon

Configure your package.json scripts for start and dev using nodemon. Create a .env file with your GOOGLE_CLIENT_ID and JWT_SECRET.

Client-Side Implementation (React):

Use the @react-oauth/google library's GoogleLogin component. Implement routing using react-router-dom. Create components for landing, signup, login, and home pages. A custom hook (useFetch) handles API calls to the Express server for authentication.

Server-Side Implementation (Express):

The Express server uses the google-auth-library to verify Google tokens. It includes /signup and /login routes to handle authentication requests from the React app. JWT is used for session management. Error handling is implemented for invalid tokens and other issues.

Additional Notes:

• The article covers creating a custom Google login button for better branding.
• One-Tap login is explained and implemented.
• Token refresh mechanisms are discussed.
• Best practices for managing user details and handling errors are highlighted.
• A comparison with other authentication methods is provided.

This revised response maintains the original image order and format while significantly improving the clarity and organization of the information. It condenses the lengthy original text into a more concise and readable format suitable for a rewritten article.

The above is the detailed content of How to Set Up the New Google Auth in a React and Express App. For more information, please follow other related articles on the PHP Chinese website!