Sure, here's an example of how you can implement one-tap sign-in with Google prompt using Next.js along with Google's JavaScript client library:
First, you need to include Google's JavaScript client library in your Next.js project. You can do this by adding the following script tag to your `_document.js` file:
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<script src="https://accounts.google.com/gsi/client"></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;Then, you can create a button in your Next.js component to trigger the one-tap sign-in prompt:
// pages/index.js
import { useEffect } from 'react';
function Home() {
useEffect(() => {
window.google.accounts.id.initialize({
client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
callback: handleCredentialResponse,
});
}, []);
const handleCredentialResponse = (credential) => {
console.log(credential);
// Handle the credential response, like sending it to your backend for verification
};
const handleSignIn = () => {
window.google.accounts.id.prompt();
};
return (
<div>
<h1>Welcome to my Next.js app!</h1>
<button onClick={handleSignIn}>Sign in with Google</button>
</div>
);
}
export default Home;
Replace `'YOUR_CLIENT_ID.apps.googleusercontent.com'` with your actual Google OAuth client ID.
With this setup, when the user clicks the "Sign in with Google" button, the one-tap sign-in prompt will appear, allowing them to sign in quickly with their Google account.