How to Google Sign-in your users in 5 minutes
Tags: webdev, tutorial, productivity, tooling
Published: 2023-10-25 15:30:09

A crucial aspect of any startup is providing users with the means to authenticate themselves. There are numerous methods available for achieving this, but if you're looking for a straightforward and effective option, **Sign in with Google** is often the first choice.

Integrating **Google Sign-In** is surprisingly simple with authentication providers. Personally, I'm quite a fan of [**Stytch**](https://stytch.com/) for several compelling reasons:

- **No Credit Card Required**: they doesn't ask for your credit card information during the setup phase.
- **Variety of Providers and Methods**: It offers a wide range of alternative providers and authentication methods.
- **Robust Documentation and Responsive Support**: they provide extensive documentation, and their support team is quick to assist when needed.

## How to Set It Up

1. Begin by visiting [Stytch](https://stytch.com/start-now) and creating an account. It is important that you select **CONSUMER AUTHENTICATION**.

2. In the sidebar, navigate to **Configuration > API Keys** and save the `project_id` and the `secret` somewhere secure, like your `.env` file.

3. Next, go to **Configuration > OAuth** and enable the **Google provider**. You'll receive a link, which you can use as the `href` attribute value in an `<a>` tag.

4. Lastly, instruct Stytch on where to redirect the user after completing authentication. Under **Configuration > Redirect URLs**, define a redirect URI for both `signup` and `login`. You can even have separate URIs for each.

![a list of redirects URLs provided to Stytch. e.g. http://localhost:5173/api/stytch/callback/signup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svghulipyksxfjmfgue0.png)

## Integration in Your Project

The minimum requirement is a simple HTML page that presents the `<a>` element with the `href` obtained in the previous section.

You'll also need an endpoint exposed to the redirect URI set in the previous section. This endpoint should be a **GET method** to which Stytch will send the authenticated client.

Stytch will attach two query parameters:

- `stytch_token_type`, with a value of `oauth`, which allows you to identify the authentication method used (though it can be ignored for this tutorial).
- `token`, a string that must be [exchanged](https://stytch.com/docs/api/session-auth) with the Stytch servers.

If you're using **Node.js**, the process is straightforward, as shown in this example:

```javascript
import express from 'express';
import { Client } from 'stytch';

const client = new Client({
   project_id: process.env.PROJECT_ID,
   secret: process.env.PROJECT_SECRET,
});

const app = express();

app.get('/api/stytch/callback/signup', async (req, res) => {
   const token = req.query.token;

   const response = await client.oauth.authenticate({ token, session_duration_minutes: 60 * 60 });

   // Just an example
   db.users.add(response.user);

   res.cookie('token', res.session_jwt, { httpOnly: true });

   res.redirect("/dashboard");
});

// Omitting app.get("/api/stytch/callback/login") for brevity

app.listen(5173);
```

## Give It a Try

To test it, run a live server and open the HTML page. Click the button to have your browser redirect you to the link provided by Stytch. Choose which Google account to use. The first time, it will invoke the signup endpoint, and all subsequent attempts will use the login endpoint

***

## Unlock the Boundless Potential of ShipRapid!

But wait, this is just the tip of the iceberg. Your journey has only just begun, and you have the power to explore, adapt, and shape the system to match your unique vision.

On the flip side, if you've been nurturing that brilliant idea, the one you're itching to transform into a **thriving startup**, then you've landed on the right launchpad. I present to you: [**ShipRapid**](https://bit.ly/3MDl5yD)!

**Imagination, intuition, decision-making, and speed of execution**.

In the ever-evolving world of startups, **timing is everything**. You can't afford to get bogged down by technicalities.

**Let the market itself guide your efforts and investments**.

For those who crave speed, I've meticulously crafted ShipRapid, a SvelteKit template - not just a template; it's a supercharged toolkit offering **modular**, **out-of-the-box solutions** that cater to the essentials of every startup:

- **Authentication**: Seamlessly connect with Google and harness the magic of Magic Link for ultra-convenient logins.

- **Payments**: Sail smoothly with Stripe's payment handling, ensuring secure and seamless transactions.

- **Databases**: Establish a robust foundation with MongoDB for data management that's as agile as your ambitions.

- **Content Management**: Navigate the seas of content with a built-in CMS that powers your documentation, blogs, and static content with ease.

- **SEO Mastery**: Enhance your online presence through intuitive SEO management tools.

And that's just the beginning; there's a treasure trove of features waiting for you.

<center>
<table>
<tr>
<td>
<a href="https://bit.ly/3MDl5yD">Discover ShipRapid</a>
</td>
</tr>
</table>
</center>