
#### Table of Contents

1. Introduction
2. Requirements
3. Add Google Sign-In callback
4. Use with next-session
5. Conclusion

### Introduction

This tutorial shows how to integrate sign in with Google account, and how to handle callback response from Google Sign-In.

### Requirements

- GCP
  - Has knowledge of using Google Cloud.
  - Already setup google sign-in setting OAuth Client ID and Secret at Google Cloud, or reference [here](/blog/post/how-to-sign-in-with-google-for-web-application-about-setup) for how to setup Google Sign.

### Add Google Sign-In callback

Once setup the Google Sign-In, OAuth Client, and redirect URLs, then first thing we can do is add call back function at the application to handle the response sending by the Google Sign In.

If define as below as **_http://localhost:3000/api/auth/callback/google_**, then once user successfully sign-in with google will redirect to that URL with JWT token, so will need logic to process the information, for instance, save the **_name_**, **_email_** to the database, or save the email to the session. So this article will demonstrate how to use `next-session` to save to the session, cookie and how to clear session build custom logic with logout function.

![OAuth Create Screen](/images/sign-google-nextjs/img2.png)

Below is sample code, so once google callback come to this function, you can start parse the credential as **_jwt_** token, then read the value from, for instance below you should be able to get name and email who successfully sign-in with google.

```TypeScript
export default async function auth(req: NextApiRequest, res: NextApiResponse) {

const credential = req.body.credential;

const jwtToken = JSON.parse(Buffer.from(credential.split('.')[1], 'base64').toString())

const name = jwtToken.name;

const email = jwtToken.email;

}

```

### Use with next-session

Once build callback function, you need to store those information at the web application. One of the way to do is using the **_next-session_**.

```TypeScript
export const getSession = nextSession({
  cookie: {
    sameSite: 'lax',
    maxAge: 60 * 60 * 24 * 365,
  }
});
```

### Conclusion
This blog demo example code how to google sign-in callback works and how you can using ***next-session*** to store user specific information across your application.

This tutorial shows how to integrate sign in with Google account, and how to handle callback response from Google Sign-In.

Sign In with Google at Next.js and Next-Session


#### Table of Contents

1. Introduction
2. Requirements
3. Create Google OAuth Client ID and Secret
4. Configure OAuth Consent Screen
5. Load with Default Setting
6. Conclusion

### Introduction

This tutorial shows how to integrate sign in with Google, along with setup the Google API, Create OAuth Client.

### Requirements

- GCP
  - Has knowledge of using Google Cloud.
  - Has set up project by using Google Cloud.

### Create Google OAuth Client ID and Secret

Since use Google Account for sign in, first we'll need to create OAuth Client ID an Client Secret.

Go to the APIs & Services' Credentials Page
Once land at the Credentials Page, you'll see _APIKeys_, _OAuth 2.0 Client IDs_, _Service Accounts_.

Click _CREATE CREDENTIALS_ and choose _OAuth Client ID_.
![Choose Create OAuth](/images/sign-google-nextjs/img1.png)

For the detail of the OAuth Client ID, reference as below

- Application Type
  - Choose _Web Application_, since we'll use the _Next.js_.
- Name
  - Enter any meaningful name following your application's standard.
- Authorized Javascript Origins
  - _http://localhost:3000_, for testing, our next.js will start port as _3000_.
- Authorized redirect URIs
  - _http://localhost:3000/api/auth/callback/google_, this's the redirect URL after user authorized with Google Account, will redirect to this URL with.

![OAuth Create Screen](/images/sign-google-nextjs/img2.png)

Click the _Create_ button, once create the OAuth, we'll be able to obtain the Google client ID and secret, store these for now cause we'll need these value later.

### Configure OAuth Consent Screen

First of all, what's this OAuth Consent Screen, right?
So enter the information at OAuth Consent Screen, can control below options when user use Google Account to Sign In.

- Application Name
- Application Logo
- Support email
- Application HomePage / Privacy Policy / Terms of Service Links

As you can see, Enter detail information can help user to find more detail about the application during the sign-in process.

### Load with Default Setting

Once create OAuth Client ID, Secret and fill out OAuth Consent Screen, the Setting for the Google part is done, now, base on the Google Account's instruction, at very minimal with below information you can use the Google Account now.

First, add following script file to the page.

```Javascript
<script src="https://apis.google.com/js/platform.js" defer></script>
```

Then, create button with _OAuth Client ID_

```HTML
<div
  id="g_id_onload"
  data-client_id="{Your_OAuth_Client_ID}.apps.googleusercontent.com"
  data-context="signup"
  data-ux_mode="popup"
  data-login_uri="auth"
  data-auto_prompt="false"
>Sign In</div>
```

Now, with these setup, once launch the app with port _http://localhost:3000_ and click the button Sign In will open Google Account, and once finish the Google Account's authentication will redirect to your app's redirect URL and post the JWT token information.

You can enhance above code so you can use the Google Account Sign in, but at this tutorial we'd like also try the _next-auth.js_ for authentication.

### Conclusion

Sign In with Google is the quick way to let your user to authenticate to your application, without manage user's password, this blog is focus on how to setup the Google Sign-in at Google, next will demo how to use the same setting to create Google Sign-in with next-auth or build system your self to intergrade with Google Sign-in.


This tutorial shows how to integrate sign in with Google account, focus on how to setup at the GCP.

How to Configure Google Sign-In with Google


#### Table of Contents

1. Introduction
2. Requirements
3. Get started with NextAuth.js with Google Sign In
4. Conclusion

### Introduction

This tutorial shows how to integrate sign in with Google by use _next-auth.js_ under Next.js Web Application, for how to setup or configure google sign-in, please reference [here](/blog/post/how-to-sign-in-with-google-for-web-application-about-setup) for detail about setup google sign-in.

### Requirements

Since this tutorial assume we're use Google Account with _next-auth.js_ Next.js, so below are least requirements to get further of this tutorial.

- GCP
  - Has knowledge of using Google Cloud.
  - Has set up project by using Google Cloud.
- Next.js
  - Already has application built with _Next.js_.
  - Has knowledge of how to use _Next.js_.

### Client ID, Secret, OAuth Consent Screen Setup

Regarding Google OAuth Client ID and Secret, OAuth Consent Screen setup, please reference [here](/blog/post/how-to-sign-in-with-google-for-web-application-about-setup) to see more detail.

### Get started with NextAuth.js with Google Sign In

Here we'll setup NextAuth.js to the Next.js
First, let's install the dependencies packages.

```node.js
npm install next-auth
```

Next, let's replace `_app.js` with below code.

**Before**

```Javascript
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
```

**After**

```Javascript
import { SessionProvider } from 'next-auth/react';

export default function App({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}
```

Create **[...nextauth...].js** under **pages/api/auth** location.
_NextAuth.js_ has many different provider, Google Account is just one of them, replace the below client*id and client_secret with the one you already created at the OAuth. Also, \_NextAuth.js* has different callbacks, you can use one of this to intergrade with your own system, such as check the user if already register at your application or not.

```Javascript
import type { NextApiRequest, NextApiResponse } from 'next';
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default async function auth(req: NextApiRequest, res: NextApiResponse) {
  return await NextAuth(req, res, {
    providers: [
      GoogleProvider({
        clientId:
          'my_client_id',
        clientSecret: 'my_client_secret',
      }),
    ],
    callbacks: {
      async jwt({ token, account, isNewUser, profile, user }) {
        return token;
      },
      async signIn({ user, account, profile, email, credentials }) {

        if (account.provider === 'google') {
          // check if user already exist or not with custom db

          else {
            // existing user
          }
        }
        return true;
      },
      async redirect({ url, baseUrl }) {
        return baseUrl;
      },
      async session({ session, token, user }) {
        return session;
      },
    },
    theme: {
      colorScheme: 'light',
      brandColor: '#343434',
      logo: '',
      buttonText: '#333',
    },
  });
}
```

### Conclusion

Sign In with Google is strict forward way to let your user to authenticate with your application, with `next-auth` is even better that due to it's able to manage the session and make it easy to manager the user information or intergrade with Google Sign-In and other third-party sign-in platform. Next, will be without using the `next-auth`, how to intergrade with Google Sign-in with Next.js web application.


This tutorial shows how to use Next-Auth to integrate sign in with Google under Next.js web application.

How to Use Next-Auth with Google Sign-In

# About Universal Analytics

This page is showing example of how to setup Universal Analytics for learning purpose, please be aware the Google Universal Analytics will no longer process new data beginning July 1, 2023. You'll have to switch to Google Analytics 4 Property.

## Create GA4 Property
At here, we'll try to create GA4 property, if you have existing account with the old Universal Analytics you can use the same account and create a new property and use the GA4 Setup Assistant to setup GA4.
![GA4 Setup Assistant](/images/setup-ga4-with-gtm/img4.png)

Choose the option that want to create a new Google Analytics 4 Property.
![Crate GA4 - Get Started](/images/setup-ga4-with-gtm/img5.png)

Click Create Property to create new GA4 property. Once create a GA4 property make a note for the mesurement ID, because we'll need later the value to add to the Google Tag Manager.
![Create GA4 Property](/images/setup-ga4-with-gtm/img6.png)
## Create new Google Tag Manager Container
Here, create a new Google Tag Manager container under your account.
![GTM Code Snippet](/images/setup-ga4-with-gtm/img1.png)

## Install Google Tag Manager into Your Site
Then go to the admin section and follow the instruction to use the code snippet and add back to your site. Once add Google Tag Manager code to the site, later we can configure additional tags or scripts to load to the site.
Here add new tag and add the Google Analytics GA4 Configurations
![GTM - GA4 Configuration](/images/setup-ga4-with-gtm/img2.png)

## Add Google Analytics GA4 Configuration
Add the GA4 mesurement ID, so Google Tag Manager's GA4 configuration will connect to the new GA4 Analytic's measurement ID.
![GTM - GA4 Configuration with Measurement ID](/images/setup-ga4-with-gtm/img3.png)

Now, if you load the page with the GTM script you add before should be loading the script for the GA4 start collection default data and send to Google Analytics, such as page view.








Google Tag Manager provide easy way to setup Google Analytics 4, this blog provide steps to walk through how to setup GA4 via GTM.

How to Setup Google Analytics 4 with Google Tag Manager

# About Universal Analytics

This page is showing example of how to setup Universal Analytics for learning purpose, please be aware the Google Universal Analytics will no longer process new data beginning July 1, 2023. You'll have to switch to Google Analytics 4 Property.

## Why use dataLayer for GA4?

GA4 has different ways to fire events. Enhanced measurement events, which is build in events that will enable by options, then Recommended events, these events won't send automatically but will require some configuration or manual setup. Now, if the events you want to fire are not both of these scenario, you can create custom events and send to GA4. You can use `gtag` or `dataLayer` to send custom events. 

This blog will focus and demo how to use `dataLayer` to fire custom events to GA4.

## Pre Requirement

This blog assume following task are already done on your site.
+ You have google tag manager already configure for GA4.
+ Your web site had load above GTM.
+ Your Google Analytics had link to Big Query.

## Goal
The goal we're trying to do is fire following dataLayer events, assume you have contact form at home page, you would like to try this data at GA4. For testing purpose we'll fire below events at console, but once we fire the events, we'll see how does it show at the browser, how to see events at GA4 UI and hwo data flow into Big Query.

```
// we wan't to fire this event when the user click the submit contact form button.
dataLayer.push({"event" : "contact_lead", "email": "test@test.com", "page": "home"});
```
If you just run the above Javascript at console, nothing will happen until you finish following setup at GTM.

## Create Triggers at GTM

At GTM, click Triggers > Custom Events, and enter the event name as `contact_lead`.
![Enter Event Name for Custom Events](/images/setup-datalayer/img1.png)

## Create DataLayer Variable
If you look at the above dataLayer, you can see there are two fields, `email` and `page`. We'll need to configure the dataLayer variable so run above dataLayer will include the `email` and `page` fields.

At GTM, click Variables -> User-Defined Variables, create 2 dataLayer variables as below.
![Enter dataLayer variable for Custom Events](/images/setup-datalayer/img2.png)

## Crate Google Analytics GA4 Event
One created Triggers and Variable, we can create a new GA4 Event tag.
Click Tags > New > Google Analytics: GA4 Event
![GA4 custom events](/images/setup-datalayer/img3.png)
Here, we'll enter the event name as `contact_lead` and also 2 more Event Parameters. Now the configuration for run above Javacript code is ready. 

## Choose the Triggering for GA4 Event
Now, the last part is add the trigger, as when above events should fire, so far we set all the custom events but you can filter to class or id.
![GA4 custom events trigger](/images/setup-datalayer/img4.png)

## Publish or Preview the GTM changes
If you don't want to publish your GTM changes, you can preview and test the setting or just did and see if we can fire the events with GA4.

## Verify the code

Run the below code at browser console windows to test. 
![Run dataLayer code](/images/setup-datalayer/img5.png)

After run the above code, take a look at the browser network tab, you should see some request start from `collect?v=2...`, this is GA4 request.

As you can see the GA4 request include the email and page's key and value, without the GTM setup, you won't see this request fire, without the dataLayer variables you won't see the email and page include to the payload either.
![GA4 Payload](/images/setup-datalayer/img6.png)

You can test by running following javascript code at console, so if the GA4 will include this data or not, which it will not include unless you configure the datalayer variable `data1` at GTM.
```
dataLayer.push({"event" : "contact_lead", "email": "test@test.com", "page": "home", "data1": "other data"});
```

## Verify at GA4 UI
You can verify the event by go to the GA4's realtime section and check the section for events, as you can see our `contact_lead` displays at the page, and you will see the email and page's key and value as well.
![GA4 UI](/images/setup-datalayer/img7.png)

## How about the Big Query?
If you connect the GA4 with Big Query, you should see the something `analytics_111111` and there's `events_intraday_`, that intraday will be a stream data coming from GA4, and you can see our contact_lead is writing to this table.

![Big Query](/images/setup-datalayer/img8.png)

## Conclusion
GA4 provide `dataLayer` and `gtag` to fire custom events, if using `dataLayer` you will have to configure trigger and events at GTM, if follow the correct steps should be able to configure quick, but lots of configuration at GTM might not suitable for certain company's requirements.









Google Tag Manager provide easy way to setup GA4, and GA4 custom events. This blog provide steps to walk through how to setup GA4 custom events via GTM.

Category Google Tag Manager

Sign In with Google at Next.js and Next-Session

How to Configure Google Sign-In with Google

How to Use Next-Auth with Google Sign-In

How to Setup Google Analytics 4 with Google Tag Manager

How to Use dataLayer to fire GA4 Custom Events via Google Tag Manager