Forem: Lev

Implementing Google OAuth Authentication in Next.js Using Passport.js and Serverless Functions

Lev — Sat, 26 Aug 2023 16:00:07 +0000

User authentication is a critical component of web applications, ensuring security and personalized experiences for users. Google OAuth authentication is a popular choice, allowing users to sign in using their Google accounts. In this tutorial, we’ll explore how to implement Google OAuth authentication in a Next.js application using Passport.js, passport-google-oauth, next-connect, and serverless functions.

What is OAuth?

OAuth, in essence, is a delegated authorization framework. It enables third-party applications to access specific user data hosted by another service provider, such as Google, without requiring the user to reveal their credentials. Instead of sharing passwords, OAuth grants access using access tokens and refresh tokens.

Benefits of OAuth for Authentication

OAuth offers several advantages for implementing user authentication:

Security: Users’ credentials remain confidential, reducing the risk of data breaches due to compromised passwords.
Simplified User Experience: OAuth simplifies the user experience by allowing them to grant selective access without sharing their complete account information.
Authorization Granularity: Service providers can define scopes that control the level of access granted to third-party applications.
No Password Exposure: Third-party applications don’t receive or store user passwords, increasing security. Single Sign-On (SSO): OAuth supports single sign-on, allowing users to access multiple applications with a single set of credentials.

Google OAuth Integration

One popular use case of OAuth is integrating with Google’s authentication services. Google OAuth enables users to log into applications using their Google accounts, benefiting from Google’s robust security measures and convenient login process.

Integrating Google OAuth with a Next.js application involves configuring your app as a trusted OAuth client within the Google Developer Console. This enables your app to request access to user data, such as their Google profile information, email, or other specified permissions.

In the next sections, we’ll delve into the technical steps required to set up Google OAuth authentication in a Next.js application using serverless functions. This approach combines the security of Google’s authentication services with the efficiency and flexibility of serverless functions to create a seamless authentication flow for your users.

Serverless Functions in Next.js

In recent years, serverless architecture has gained significant traction in web development due to its scalability, cost-effectiveness, and ease of deployment. Serverless functions, also known as serverless APIs or lambda functions, allow developers to execute code in response to events without managing server infrastructure.

Introduction to Serverless Functions

Serverless functions are self-contained pieces of code that perform specific tasks and are executed on-demand. They are designed to be stateless, meaning they don’t store data between invocations. Instead, they handle a single request and provide a response. This architecture allows developers to focus on writing code without the overhead of managing server infrastructure.

Why Use Serverless Functions?

Serverless functions offer several advantages that make them appealing for various use cases:

Scalability: Serverless functions automatically scale based on demand, ensuring optimal performance during traffic spikes.
Cost Efficiency: You pay only for the resources consumed during function execution, reducing infrastructure costs. Simplified Deployment: Deploying serverless functions is straightforward, and providers handle deployment details.
Faster Development: Serverless functions encourage modular development and rapid iteration.
Managed Infrastructure: Cloud providers manage server provisioning, scaling, and maintenance.

How Serverless Functions Work in Next.js

Next.js, a popular React framework, offers built-in support for serverless functions. These functions can be created directly within your Next.js project and seamlessly integrated with your application. With serverless functions in Next.js, you can build backend APIs, handle form submissions, and perform various tasks without the need for a dedicated server.

In a Next.js project, serverless functions are placed in the pages/api directory. Each file in this directory represents a serverless function that can be invoked via HTTP requests. The serverless functions are automatically deployed along with your Next.js application when you deploy it to platforms like Vercel, Netlify, or other serverless hosting providers.

In the next section, we’ll dive into the process of setting up Google OAuth authentication in a Next.js application using serverless functions. We’ll combine the power of OAuth with the flexibility of serverless architecture to create a secure and efficient authentication flow for your users.

Prerequisites

Before you begin, make sure you have the following set up:

Node.js and npm installed
A Google Developer Console project with OAuth 2.0 credentials

Steps

1. Set Up Google OAuth Credentials

Go to the Google Developer Console.
Create a new project or use an existing one.
Navigate to “APIs & Services” > “Credentials.”
Create credentials and select “OAuth 2.0 Client IDs.” Configure your authorized redirect URIs. In our example: http://localhost:3000/api/account/google/callback

2. Install Dependencies

In your Next.js project, install the necessary dependencies:

npm install passport passport-google-oauth next-connect

3. Implementing the OAuth Login Flow

Create a Login Button: In your application’s UI, create a button that users can click to initiate the OAuth login flow.
Redirect to OAuth Endpoint: When the user clicks the login button, redirect them to the OAuth authorization URL you constructed using your OAuth Client ID and the appropriate scope.
OAuth Callback Handling: After the user grants access and Google redirects back to your application, your serverless function should handle the OAuth callback. Retrieve the authorization code from the query parameters and exchange it for an access token.
Store User Data: Once you receive the access token, you can use it to request user data from Google. Store relevant user information in your application’s session or database.

By following these steps, you can implement Google OAuth authentication in your Next.js application without using third-party libraries like next-auth. This approach provides you with full control over the authentication process and allows you to tailor the implementation to your specific needs. While it requires more manual configuration, it offers a deeper understanding of how OAuth works and allows for more customization.

4. Create OAuth Strategy and Callback Serverless Function

Create an OAuth strategy using passport-google-oauth. Create a file named pages/api/account/google/[operation].ts:

import type { NextApiRequest, NextApiResponse } from "next";
import { createRouter } from "next-connect";
import passport from "passport";
import Google, {
  IOAuth2StrategyOption,
  Profile,
  VerifyFunction,
} from "passport-google-oauth";
import { findUser, sendWelcomeEmail } from "@/app/account/actions";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import { createUserFromProvider } from "../lib";
import { get } from "lodash";
import { getSecureCookie } from "@/app/lib/services/cookies";

dayjs.extend(duration);

export const config = {
  api: {
    externalResolver: true,
  },
};

passport.use(
  new Google.OAuth2Strategy(
    {
      clientID: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      callbackURL: process.env.NEXT_PUBLIC_GOOGLE_CALLBACK_URL,
    } as IOAuth2StrategyOption,
    (
      accessToken: string,
      refreshToken: string,
      profile: Profile,
      done: VerifyFunction
    ) => {
      done(null, profile);
    }
  )
);

const router = createRouter<NextApiRequest, NextApiResponse>();

router.get((req, res, next) => {
  if (req.query.operation === "auth") {
    return passport.authenticate("google", { scope: ["profile", "email"] })(
      req,
      res,
      next
    );
  } else if (req.query.operation === "callback") {
    return passport.authenticate(
      "google",
      async (err: any, profile: any, info: any) => {
        if (err) {
          res.status(500).end();
          return;
        }
        let user = await findUser({
          email: profile.emails[0].value,
        });
        if (!user) {
          user = await createUserFromProvider({
            profile,
            identityProvider: "GOOGLE",
          });
          setTimeout(async () => {
            await sendWelcomeEmail({ email: user!.email });
          }, 0);
        } else if (user.identityProvider !== "GOOGLE") {
          res.redirect("/?error=exists_with_different_identity");
          return;
        }
        const cookie = await getSecureCookie({
          name: "user",
          value: {
            email: user!.email,
            id: user!.id,
            photo: get(profile, "photos[0].value", ""),
            name: get(profile, "displayName", ""),
            username: user!.username,
          },
        });
        res.setHeader("Set-Cookie", cookie);
        res.redirect("/profile");
      }
    )(req, res, next);
  } else {
    res.status(400).json({ error: "Unknown operation." });
  }
});

export default router.handler({
  onError: (err: any, req: any, res: any) => {
    console.error(err.stack);
    res.status(err.statusCode || 500).end(err.message);
  },
});

The provided code is an implementation of Google OAuth authentication using Passport.js, Next.js API routes, and some custom logic for user management. Let’s break down the code step by step:

Import Statements: The code starts by importing various modules and functions required for the authentication process.
Passport Configuration: The passport.use function configures the Google OAuth2Strategy with the provided client ID, client secret, and callback URL. This strategy handles the authentication process with Google.
Router Setup: The createRouter function from next-connect is used to create an API route handler (router). The router will handle different operations based on the query parameter named operation.
Google OAuth Flow: If the operation is set to "auth", it triggers the Google OAuth authentication process. The user will be redirected to Google's login page to authenticate their account. If the operation is set to "callback", it handles the callback after the user logs in with their Google account. The passport.authenticate function is used to authenticate the user based on the Google OAuth strategy. If the authentication is successful (profile contains user information), it checks if the user already exists in the local database based on their email. If the user does not exist, a new user is created using the createUserFromProvider function. A welcome email is also sent to the new user asynchronously. If the user exists but has a different identity provider (not Google), the user is redirected with an error message. If the user exists and has Google as their identity provider, a secure cookie containing user information is generated and set in the response header. The user is then redirected to the profile page. Finally, if there is an error during authentication, a 500 status code is returned.
Error Handling: The onError handler is defined to handle any errors that might occur during the authentication process. If an error occurs, it logs the error and sends an appropriate response.
Export and Handling: The router.handler function is used to export the API route handler. This handler will be invoked when a request is made to the specified API route.

In summary, the code follows the Google OAuth authentication flow using Passport.js, fetches user information, checks for existing users, and handles the creation of new users or redirects based on the user’s identity. It also takes care of error handling and response generation throughout the process.

Securing and Managing User Sessions

User sessions play a crucial role in maintaining a seamless and secure authentication experience in your Next.js application. By properly securing and managing user sessions, you can ensure that users stay authenticated during their interactions with your platform.

Storing and Managing User Sessions

Session Tokens or Cookies: Choose between using session tokens or HTTP cookies to manage user sessions. Session tokens are often stored in memory or databases, while cookies are stored in the user’s browser.
Token-Based Approach: If you opt for a token-based approach, generate a unique session token for each authenticated user. This token can be stored in the browser’s localStorage or sessionStorage and sent with each request to identify the user.
Cookie-Based Approach: With a cookie-based approach, set an HTTP cookie containing the user’s session ID. Cookies are automatically included in subsequent requests, allowing your serverless functions to identify the user.

Using Cookies or Tokens for Session Management

Cookies: Cookies provide built-in security features, such as the SameSite attribute, which helps prevent cross-site request forgery (CSRF) attacks. However, cookies have size limitations, and users can disable them.
Tokens: Using tokens allows you to implement additional security measures, such as token expiration and refresh tokens. However, token-based approaches require additional development to handle token expiration and renewal.

Enhancing User Experience

A seamless user experience is essential in any authentication flow. Enhancements such as handling loading states, managing errors, and personalizing user profiles can greatly impact how users perceive your application’s authentication process. In this section, we’ll explore ways to enhance the user experience during and after the Google OAuth authentication process.

Handling Loading States and Errors

Loading States: During the authentication flow, users may experience brief waiting periods. Implement loading indicators to inform users that their request is being processed.
Error Handling: Anticipate and handle errors gracefully. Display user-friendly error messages for scenarios like invalid credentials, network issues, or server errors.

Redirecting After Successful Authentication

Redirecting to the Home Page: After a user successfully authenticates via Google OAuth, redirect them to the appropriate page in your application. Typically, this is the home page or a dashboard.
Personalized Greetings: Consider displaying a personalized greeting message on the redirected page to enhance the user experience. Welcome the user by their name, retrieved from the user data fetched during the OAuth process.

Personalizing User Profiles

Fetching User Data: After authentication, retrieve additional user data using the access token. Fetching data such as user profile images, names, and email addresses can help you create a more personalized experience.
Displaying User Data: Display fetched user data on the user’s profile page or within the application interface. Personalized content reinforces the value of authentication and demonstrates your application’s user-centric approach.

User Preferences and Customization

Allowing User Preferences: Give users the option to customize their experience by providing settings or preferences. For example, users might choose their preferred language or theme.
Consent Management: If your application requires additional permissions beyond basic user information, clearly explain the purpose of each permission and allow users to grant or revoke consent.

Enhancing the user experience during Google OAuth authentication involves thoughtful design and attention to detail. By addressing loading states, errors, and personalization, you create a user-friendly atmosphere that encourages engagement and fosters trust.

Verification Process for Production

When you’re ready to take your application live and allow users to authenticate using Google OAuth, you must go through Google’s verification process. This process involves submitting your application for review by Google to ensure it complies with their policies and security standards. Verification is essential to prevent unauthorized use of user data and ensure a secure experience for your users.

Once your application successfully passes the verification process, you’ll receive the green light to use Google OAuth in production. This step is crucial to provide a secure and reliable authentication experience to your users.

As you navigate the verification process and transition your application to a production environment, the benefits of Google OAuth and serverless functions will continue to provide a solid foundation for secure user authentication. Remember that the journey doesn’t end here; continuous monitoring, updates, and enhancements will ensure a seamless and trustworthy experience for your application’s users.

Conclusion

Implementing Google OAuth authentication in your Next.js application using serverless functions is a powerful way to create a secure and user-friendly authentication process. In this guide, we’ve covered the entire journey, from understanding OAuth authentication to deploying your application with enhanced security and user experience. Let’s recap the benefits and next steps:

Recap of the Process

Understanding OAuth: You’ve gained a deep understanding of OAuth and its advantages for secure user authentication without exposing credentials.
Serverless Functions in Next.js: You’ve explored how serverless functions work in Next.js and why they are an excellent choice for implementing authentication.
Setting Up Google OAuth: You’ve learned how to create a Google Developer Project, configure OAuth credentials, and integrate OAuth with your Next.js application.
Creating Serverless Functions: You’ve created serverless functions to handle OAuth callbacks, exchange authorization codes for tokens, and fetch user data.
Securing User Sessions: You’ve understood the importance of secure session management and implemented measures to ensure user privacy and authorized access.
Enhancing User Experience: You’ve discovered how to handle loading states, errors, and personalize user profiles, creating a smooth and engaging authentication flow.

By following the steps outlined in this guide, you’ve successfully implemented Google OAuth authentication in your Next.js application using serverless functions. This accomplishment not only enhances security but also contributes to a user-centric experience that fosters trust and engagement. As you continue to refine and expand your application, you’ll create a robust platform that users can rely on for secure and seamless authentication.

Happy coding!

Leveraging RxJS for Seamless Communication Between Components in Different Layouts in Next.js

Lev — Tue, 08 Aug 2023 15:04:18 +0000

In Next.js, a popular React framework for building web applications, one of the challenges developers often face is efficiently communicating between components residing in different layouts. While Next.js provides a well-organized structure for managing components within layouts, it doesn’t inherently offer a direct communication mechanism between them. In this blog post, we’ll explore how to address this issue using RxJS, a powerful library for reactive programming, to establish seamless communication between components from different layouts in Next.js.

Understanding RxJS

RxJS (Reactive Extensions for JavaScript) is a library for composing asynchronous and event-based programs using observable sequences. It enables the creation and manipulation of observables, which are sequences of data or events over time. Observables can be used to handle events, manage asynchronous operations, and streamline communication between different parts of your application.

In Angular, RxJS plays a crucial role in handling asynchronous operations, managing data streams, and facilitating communication between different parts of the application. It provides powerful tools such as observables, operators, and subjects that enable developers to work with reactive programming paradigms seamlessly.

Here are the key points to consider regarding RxJS:

Observables: RxJS revolves around the concept of Observables, which are streams of data or events over time. Observables can represent a single value, multiple values, or even asynchronous data streams. They provide a powerful foundation for handling asynchronous operations and data manipulation.
Operators: RxJS offers a rich set of operators that enable developers to transform, filter, combine, and manipulate data streams efficiently. These operators allow for the implementation of complex asynchronous workflows with concise and readable code.
Reactive Programming: RxJS embraces reactive programming principles, where applications respond to changes and events as they occur, rather than waiting for explicit calls or updates. This approach leads to more responsive and interactive applications.
Event Handling: RxJS provides a streamlined approach to handle various events, whether they are user interactions, API responses, or other asynchronous operations. Observables can be used to manage events and react accordingly, simplifying event-driven programming.
Data Management: With RxJS, developers can easily manage data flows within their applications. It offers a standardized way to handle data from various sources and provides a unified mechanism for data transformation and synchronization.
Error Handling: RxJS provides error handling mechanisms that allow developers to handle errors gracefully within observable streams. This ensures that errors are properly managed without causing application crashes.
Backpressure and Memory Management: RxJS includes backpressure and memory management strategies to handle scenarios where the rate of data production exceeds the rate of data consumption. This helps prevent memory leaks and ensures optimal performance.
Multicasting: RxJS supports multicasting, which allows multiple subscribers to share a single source of data. This is particularly useful when dealing with shared resources or when you want to optimize data processing.
Testing: RxJS code is highly testable due to its functional and declarative nature. Testing observables and operators is straightforward, making it easier to create robust and reliable unit tests.
Cross-Framework Compatibility: RxJS is not limited to a specific framework and can be used in various environments, including Angular, React, Vue.js, Node.js, and more. This makes it a versatile tool for handling reactive programming in different projects.

RxJS is just one of the many solutions available for handling asynchronous and event-based programming. Depending on the specific use case and project requirements, developers may consider alternative libraries and tools. Here are some examples of other solutions available:

Redux and Redux-Observable: Redux is a predictable state management library commonly used with React applications. It helps manage the state of an application in a single, centralized store, making it easier to track changes and maintain a unidirectional data flow. Redux-Observable is an extension to Redux that leverages RxJS to handle asynchronous side effects and manage complex data flows. It allows developers to express side effects as observable streams, enabling seamless integration with Redux.
React’s Context API and useContext Hook: React’s Context API provides a way to pass data through the component tree without having to pass props down manually at every level. It enables components to subscribe to changes in the context and react accordingly when the data changes. The useContext hook allows functional components to consume context values directly without using higher-order components or render props.
EventEmitter: EventEmitter is a core module in Node.js that provides an implementation of the Observer pattern. It allows developers to create custom event emitters and listeners to facilitate communication between different parts of a Node.js application.
Pub-Sub Libraries: There are various pub-sub libraries available, such as PubSubJS and nano-pubsub, which implement the Publish-Subscribe pattern. These libraries allow components or modules to publish messages (events) to specific channels, and other components can subscribe to those channels to receive the messages.
MobX: MobX is another state management library that follows the reactive programming paradigm. It automatically tracks observable data and updates components that depend on it, making it a suitable choice for handling reactivity and data synchronization.

Scenario

Consider a typical scenario in Next.js where you have two components, ComponentA and ComponentB, residing in separate layouts, say LayoutA and LayoutB. The goal is to enable ComponentA to communicate with ComponentB, even though they are in different layouts.

Setting Up the Project

Before diving into the implementation, ensure you have a Next.js project set up. If you haven’t done that, follow these steps:

Install Next.js globally: npm install -g create-next-app
Create a new Next.js project: npx create-next-app my-nextjs-app
Navigate to the project directory: cd my-nextjs-app

Implementing Communication with RxJS

Step 1: Install RxJS in your project:

npm install rxjs

Step 2: Create a custom event bus using RxJS in a new file, eventBus.js:

import { Subject } from 'rxjs';

const eventBus = new Subject();

export default eventBus;

Step 3: In ComponentA, publish an event using the eventBus when a specific action occurs:

import React from 'react';
import eventBus from '../path/to/eventBus';

const ComponentA = () => {
  const handleClick = () => {
    eventBus.next({ type: 'ACTION_FROM_COMPONENT_A', data: 'Hello from Component A!' });
  };

  return (
    <div>
      <button onClick={handleClick}>Trigger Action</button>
    </div>
  );
};

export default ComponentA;

Step 4: In ComponentB, subscribe to the eventBus and handle the event accordingly:

import React, { useEffect, useState } from 'react';
import eventBus from '../path/to/eventBus';

const ComponentB = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const subscription = eventBus.subscribe((event) => {
      if (event.type === 'ACTION_FROM_COMPONENT_A') {
        setMessage(event.data);
      }
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return (
    <div>
      <p>Received message: {message}</p>
    </div>
  );
};

export default ComponentB;

Step 5: Include ComponentA in LayoutA and ComponentB in LayoutB. Then, utilize the layouts in your system as needed.

Conclusion

By using RxJS as an event bus, we’ve successfully established communication between ComponentA and ComponentB, even though they reside in different layouts within our Next.js application. RxJS's reactive nature allows us to handle events seamlessly and makes our application more organized and maintainable.

Remember to handle memory management properly by unsubscribing from subscriptions when components are unmounted to prevent memory leaks. With this approach, you can extend communication across multiple components and layouts efficiently, providing a smooth and interactive user experience in your Next.js applications.

While RxJS is a powerful and widely-used solution for reactive programming and asynchronous data handling, developers have a range of other options available to address specific needs in their projects. Choosing the right solution depends on factors such as the project’s complexity, the framework being used, and the specific requirements for data synchronization and event handling. By exploring various libraries and tools, developers can find the best fit for their applications and deliver efficient and responsive user experiences.

Happy coding!

How to Make Charts SEO-Friendly?

Lev — Sun, 05 Jan 2020 15:29:54 +0000

Hi,

I was breaking my head trying to understand what is the best way to structurize the data behind the following chart so it would be more "understandable" to search engines.
I checked most of the entities in https://schema.org/ but still not sure what are the best to choose.

Any help will be appreciated!

Thanks!

Let’s build a domain parking page with real-time analytics

Lev — Tue, 14 May 2019 12:20:31 +0000

It is true that most of the known domain registrars offer a domain parking service. GoDaddy even lets you earn cash with their CashParking solution, but alas, this service will cost $3.99 per month for the basic plan and you better be sure your domain(s) will generate enough traffic to cover this expense.

A screenshot from CashParking (Taken on April 20th, 2019)

Of course, alternatives do exist. We can park our domain for “free” by advertising the registrar. Here’s how the free domain parking looks like on GoDaddy:

A screenshot of one of my domains, parked at GoDaddy

Namecheap isn’t an exception. Here’s how their free domain parking page looks like:

http://parkingpage.namecheap.com/

Now don’t get me wrong — The registrars don’t have to park our domains. Their main business is to register domains and manage DNS. Therefore, it seems there is no simple and free solution for someone who wants to evaluate the usage of a domain name, while the website is under construction.

Amazon Simple Storage Service to the rescue

Full disclosure: I am a big fan of Amazon Web Services.

Because every file (object) stored at Simple Storage Service (S3) has a unique URL, we can host a website on it. What is great about this service, is that it will cost us nothing (or approximately so): As part of the AWS free usage tier, Amazon gives us 20,000 GET requests a free of charge and the next 1,000 requests for as low as $0.0004 (as of writing this story). Let’s do the math:

If our domain name is a blast and we have 100,000 monthly visitors, we will pay just as little as (100,000–20,000)/1000*0.0004=$0.032
For the average domain name, we will pay nothing…

Here’s how Amazon describes S3:

[…] Amazon S3 is designed for 99.999999999% (11 9’s) of durability, and stores data for millions of applications for companies all around the world.

Back to domain parking… In order to park our domain at S3, all we have to do is to build a static HTML webpage with some descriptive text (e.g “under construction” or “coming soon”), our domain name written in big and bold letters and initiate Google Analytics script for websites. When the webpage will be uploaded to an S3 Bucket (analogous to a directory on your OS) and having Static Website Hosting enabled, our bucket will have a unique URL, which will look like:

http://www.domain.com.s3-website-us-east-1.amazonaws.com

Before our parking page will go live, there is another optional (but suggested) step we need to perform: Create a CORS configuration for our bucket. Please read the use cases for which CORS is mandatory.

After finishing with configuration, we would create a CNAME record which origin is www.domain.com and which will be mapped to the S3 URL. It is important to notice that, S3 requires the name of the full domain (including subdomain) to match the bucket name, or otherwise, the solution won’t work.

Parking page creation automation

After we figured out how to have a parking page on S3, we will now automate the process, to be able to create a new parking page automatically by doing as few operations as possible.

For this, I have created a boilerplate project which will let you configure your domain name, as well as the descriptive text (see picture below) and connect your Google Analytics account to the landing page, so you won’t miss any visitor.

This is how your parking page is going to look like…

In order to automate the process, we need to:

Download and extract the parking webpage from the boilerplate zip.
Open a free AWS account here. During the process, Amazon will ask you for a credit card number. But as long as we will have less than 20,000 visitors per month, it won’t cost us a dime [Disclaimer: The author is not responsible for any charges you may receive from Amazon and/or their subsidiaries];
Create an IAM user with programmatic access and the following permissions: s3:PutObject, s3:PutBucketWebsite, s3:GetBucketWebsite, s3:GetBucketCORS, s3:PutBucketAcl, s3:CreateBucket, s3:ListBucket, s3:PutBucketCORS, s3:GetBucketAcl, s3:HeadBucket, s3:PutObjectAcl. If you’re unsure how to do that, head to Creating an IAM User in Your AWS Account and Specifying Permissions in a Policy. Once the user is created, write down the Access Key ID and the Secret key — we will need them for the configuration step;
Download and install Node.js 10 and npm;
Optional: Create a Google Analytics account and write down your Tracking ID (instructions).

Configuration

Now open the terminal and go to the extracted directory containing the boilerplate from step 1. There you will find a config.json file. With your favorite text editor, make the following modifications:

trackingId: Google Analytics Tracking ID (optional).
domainName: Domain name. It will appear in big bold text as shown in the screenshot above. Please use the top-level domain name (without ‘www.’).
innerHtml: The HTML which will appear under the domain name. In the screenshot above, it was set to: “Coming soon…”.
accessKeyId: The AWS Access Key ID from step 3.
secretAccessKey: The Secret Key from step 3.
awsRegion: AWS default region. We can leave it ‘us-east-1’.
showRibbon: If you want to support the project and make the ‘Fork me on GitHub’ ribbon visible on the left corner of the landing page, set the field value to true, otherwise set it to false.

We’re almost done. All we have to do now is to execute to commands:

npm install
npm run deploy

The first command can be run once. For further deployments — modify config.json and run only the second command.

Follow the progress on the screen. If everything went smooth, the last line on your terminal should be: “Please create a new record: CNAME (www.your-domain) ->www.(your-domain).s3-website-us-east-1.amazonaws.com”. But before creating, go to www.(your-domain).s3-website-us-east-1.amazonaws.com and verify your landing page is accessible. If you set Google Analytics Tracking ID, verify that there is at least one active user on the site.

Last step: Update the CNAME record using your DNS provider. Give them some time to propagate the change, then verify your domain now has a landing page.

Parking your top-level domain

Unfortunately, S3 website hosting can’t work with top-level domains. However, using our DNS provider, we can redirect the top-level domain to the www subdomain which is parked on S3. Here are instructions for creating a domain redirection using Namecheap.

Geek alert! What’s under the hood?

The project consists of two parts:

The web framework.
The AWS deployment script.

For the web framework, Angular 7 was chosen. But why use Angular for a single HTML file? The answer is plain and simple:

Flexibility: While one needs a single static page, someone might have additional needs (contact form, advertisements, animations, etc.). Angular lets us easily customize our web application.
Personal preference: I work with it on a daily basis.
Performance: As we will see shortly, there is no noticeable difference in performance and loading times between Angular and the existing parking pages served by GoDaddy and Namecheap.

In order to report to Google Analytics using a dynamic (configurable) Tracking ID, angulartics2 was the choice which at the first glance might seem like overkill, but again — I wanted to give flexibility. Mixpanel in addition, or instead of, Google Analytics? Change just a few lines of code and we’re all set.

For the AWS deployment script, there are only two external dependencies: aws-sdk and mime. Using the AWS SDK, we create/update the S3 bucket, the CORS configuration, and upload the generated Angular web app to the S3 bucket. It is important to resolve each file’s mime type, or otherwise, our landing page won’t be accessible to browsers.

Benchmark

PageSpeed Insights was used to measure performance.

Namecheap/desktop:

Namecheap/mobile:

GoDaddy/desktop:

GoDaddy/mobile:

S3 Hosting/desktop:

S3 Hosting/mobile:

To summarize the comparison of PageSpeed Insights, we can clearly see who the winner is on desktop browsers… On mobile, GoDaddy is just 2 points above S3. Namecheap was, well… Cheap in all tests. This makes S3 hosting both feasible and even preferable to the alternatives we’ve discussed earlier.

Now go and enjoy your free domain parking! 😍

For your convenience, here is the project repository:

levz0r / s3-domain-parking

Configurable lightweight domain parking page with Google Analytics support.

AWS S3 Domain Parking

This project creates an S3 bucket that is configured to host a static website with CORS enabled. All you have to do is to configure the project and create a CNAME record in your domain.

Prerequisites

AWS free tier account;
Programmatic access to AWS account with the following permissions: s3:PutObject, s3:PutBucketWebsite, s3:GetBucketWebsite, s3:GetBucketCORS, s3:PutBucketAcl, s3:CreateBucket, s3:ListBucket, s3:PutBucketCORS, s3:GetBucketAcl, s3:HeadBucket, s3:PutObjectAcl.
Access to Domain management (Namecheap, GoDaddy, etc.);
Google Analytics account (optional).
Node.js and npm installed.

Limitations

Because of the way S3 static website hosting works, it is not possible to create a CNAME record of the top level of your domain. Therefore, you can park (subdomain).domain.com (e.g www.domain.com). Having said that, some DNS providers (Namecheap) allow redirecting the top level domain to a subdomain. See question here.

Configuration

Before your parking…

View on GitHub

Thank you for reading! As always, I am happy to receive your feedback and suggestions! If you liked what you’ve read, please share this story with your friends!

-Lev

This article was originally posted on Medium

How to poll a Gmail inbox using cypress.io

Lev — Tue, 19 Mar 2019 09:58:08 +0000

Hey! Read about my experience writing custom tasks for the cypress framework.
Read the article on Medium: https://medium.com/@levz0r/how-to-poll-a-gmail-inbox-in-cypress-io-a4286cfdb888

Angular CLI + gulp: Versioning your application made easy!

Lev — Sat, 16 Mar 2019 17:29:31 +0000

Read here: https://medium.com/@levz0r/angular-cli-gulp-versioning-your-application-made-easy-d72a5f55b083