useState
APIs & Services
under Quick Access NEW PROJECT
to create a new project OAuth consent screen
on the left-hand side of the page as seen belowπ External
and Create
as seen in the picture above πSave and Continue
Save and Continue
Credentials
on the left side of your dashboard and click on + CREATE CREDENTIALS
OAuth client ID
Authorized Javascript Origins
to add your local server port and custom URL Authorized redirect URLs
App.jsx/js
to have an empty file like this: πnpm i axios
npm i react-icons
npm i @react-oauth/google
package.json
file to confirm if you have something like this π //FOR vite user
VITE_CLIENT_ID = //YOUR CLIENT ID
//for create-react-app user
REACT_APP_CLIENT_ID = //YOUR CLIENT ID
Main.jsx
or Index.js
file, Imports the GoogleOAuthProvider
component from the @react-oauth/google
library, which helps integrate Google OAuth functionality into your application. import { GoogleOAuthProvider } from '@react-oauth/google'
<GoogleOAuthProvider clientId={import.meta.env.VITE_CLIENT_ID}>
{/* Components using Google OAuth */}
<App />
</GoogleOAuthProvider>
Login.jsx
under the src
folderLogin.jsx
import axios from "axios";
import { useGoogleLogin } from "@react-oauth/google";
import { FcGoogle } from "react-icons/fc";
import axios from "axios"
: This line imports the axios
library, a popular tool for making HTTP requests in JavaScript applications. It allows you to fetch data from APIs or servers.import { useGoogleLogin } from "@react-oauth/google
": This line imports the useGoogleLogin
hook from the @react-oauth/google
library. This library simplifies integrating Google Sign-In functionality into your React application. The useGoogleLogin
hook provides a way to trigger Google Sign-In and handle the user's response.import { FcGoogle } from "react-icons/fc"
: This line imports the FcGoogle
component from the react-icons/fc
library. This library provides access to a collection of icons (including Google) that can be easily integrated into your React components. The FcGoogle
component specifically renders the Google icon. const Login = () => {
// ... component logic
};
Login
. Functional components are a way to create reusable UI elements in React by defining a function that returns JSX (JavaScript XML) describing the UI structure.Login
function const login = useGoogleLogin({
onSuccess: async (response) => {
try {
const res = await axios.get(
"https://www.googleapis.com/oauth2/v3/userinfo",
{
headers: { Authorization: `Bearer ${response.access_token}` },
}
);
console.log(res.data);
} catch (err) {
console.log(err);
}
},
});
return (
<div className="flex justify-center items-center my-[300px]">
<button onClick={login} className="flex bg-black rounded-xl">
<FcGoogle style={{ fontSize: "30px", marginRight: "10px" }} />
Login with Google
</button>
</div>
);
Login
component. export default Login;
import Login from './Login'
function App() {
return (
<>
<Login />
</>
)
}
export default App
npm run dev
Posted Jul 15, 2024
Learn how to integrate Google login seamlessly into your React.js app using Google Auth API. Simplify user registration with ease
0
39