DEV Community: Eero Kukko

Create Google (Login) Credentials for Your Web Application

Eero Kukko — Sun, 27 Oct 2024 17:29:11 +0000

If you want to use Google (federated login) to authenticate users, you need to create a Google project with OAuth authentication screen. Here are the required steps:

Create Google Project or use your existing project
Create OAuth consent screen
Create the credentials

Create Google Project

Go to Google cloud console and create a project. This is done by clicking the button circled red in the image below.

Choose "New project" from the top left button. This opens the window to fill the project details. Assign a name to the project. Choose your organization and location. These are based on your Google Cloud account, but unless you have a big project the default settings should be fine.

Create OAuth Consent Screen

In the Google Console, select your project, if not already selected, and then click on "APIs and Services". From this screen choose the OAuth consent screen from the left menu.

For demo purposes I'm going to choose internal, but you can change this later. In the internal mode, your users are limited to Google Workspace users within your organisation. This is perfect if you're creating apps for internal use in your company.

Next add the mandatory details such as application name, User support email, and developer contact information.

Next you will need to choose the API scopes your application requires. Scopes are permissions to access the user information and services. Some of the scopes are more sensitive like access to user's Gmail. For authentication, I'm choosing the email and profile.

Continue to review the OAuth consent screen creation and complete this step.

Create Credentials

The last step is to create the credentials for your application or web service. You can add multiple credentials to use with different services.

In this example Google Login is used with a web service and thus a Web application is chosen from the list. Add a name to the service and then the URLs:

Authorized origin is the URL where the browser is entering the Google Login. For testing, it's easiest to use localhost. If you are using a real domain name, you must have https (SSL/TLS) set-up.
Authorized redirect is the address the user is re-directed after the authentication. This is typically your server and path that you use to login the user.

Once you save the configuration, you should see the Client ID and Client Secret.

Congratulations, you have successfully created the Google Credentials for your application.

Testing the Credentials

The fastest way to test your credentials is to open Google's OAuth login site with the URL below. Copy the URL to your browser and add your Client id to the end of the URL to test your login. If you're interested in the Google OAuth URLs, you can find Google's well-known OpenID configuration from here.

https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.profile&access_type=offline&include_granted_scopes=true&response_type=code&state=optional_parameter_to_track_state_12345&redirect_uri=http://localhost:3000/google&client_id=add_your_id_here

If you configuration was successful, you should see the Google login screen.

Once you have completed the authentication, you should be re-directed to the Re-direct URL.

Instead of writing all the logic for user authentication and token verification yourself, there are many libraries available for this, such as Passport for Node.js. Here is link to their tutorial.

Happy Coding!

Optimising Node.js and React with Compression

Eero Kukko — Wed, 07 Dec 2022 08:44:33 +0000

If you have a large web page/app, you're already familiar with this issue. Below you'll find few ways to compress data and decrease the page load time with Node.

Background

I have a single page React web application with a large amount of files, imports, css, fonts etc. Before the page is served, all the assets are compiled & bundled with Webpack. In this case, most of the assets (css, html and js) are bundled into a single html file to decrease the amount of network requests.

If you are sending a large amount of files over HTTP/HTTPS/HTTP/2, there is some overhead from the all the requests that the client needs to make and process. Every request has headers, checksums, authentication and authorisation fields that someone needs to transfer and process.

In the examples below, the backend is based on Node.js/Fastify, but the same tricks work with Express and on other Node frameworks.

Loading Time...

In the development environment the connection is fast. I didn't even notice that the file had grown to 14,9 MB. Despite the many database requests in the backend, the page load takes less than a second.

This isn't the case when the network connection is downgraded to "Fast 3G" in Chrome developer tools. It took 1.4 min to load the page! This is not a very good user experience.

On the Fly Compression

With on the fly compression, the server takes the uncompressed data and compresses it before sending it to the browser. There are different tools that you can use to compress the data on the fly. Here are few examples:

With fastify/compress the process is quite simple.

Install the package npm i @fastify/compress
Add the compression hook to your Fastify server

This code will enable global compression on Fastify.

import Fastify from 'fastify';

const fastify = Fastify();
fastify.register(import('@fastify/compress'));

With the default settings, the compressed page is now only 1,7 MB and with the slower network connection it took only 20 seconds to load the page.

Unfortunately it took over 14 seconds to load the page with the fast connection. The server was too slow to compress the data and made the connection 14 x slower. If you have a powerful server, this might not be an issues.

Static Compression

When on the fly compression is too slow, you can configure e.g. Webpack to create an html bundle and a compressed version of the bundle.

new CompressionPlugin({
  algorithm: 'gzip',
  filename: '[path][base].gz',
  test: /\.(html)$/
}),

With this Webpack plugin, the server now has two files it can serve:

/dist/page.html
/dist/page.html.gz

More information about the Webpack configuration: https://webpack.js.org/plugins/compression-webpack-plugin/

If you're not using a module bundler, you can just manually compress the file.

// To keep the original file use the -k option
gzip -k filename

Because some clients might not support compression, the server needs to check which compression algorithms are supported, before sending the compressed data. This is done by checking the client's "Accept-Encoding" HTTP header. Here is an example header from a client that supports gzip, deflate and br (Brotli).

The server needs to set 'Content-Encoding' HTTP header to the right compression format e.g. gzip or br, otherwise the browser doesn't know it's being served a compressed stream.

Here's a Node/Fastify example of serving a compressed file:

fastify.get('/page',
  async (req, res) => {

    let encoding = req.headers['accept-encoding']
          ? req.headers['accept-encoding'].split(',')
          : [];
    let gzipReply = encoding.find(e => e == 'gzip') ? true : false;

    if (gzipReply) {
      return res.header('Content-Encoding', 'gzip')
              .send(createReadStream('./dist/page.html.gz'));
    }

    return res.send(createReadStream('./dist/page.html'));
  }
);

With the fast connection, the load time was typically reduced by 100 - 200 ms.

With the slower "Fast 3G" connection, the load time was reduced from 1.4 min to 11 sec.

There is one caveat here for development. Brotli file compression increased the Webpack bundling time from 7 seconds to 23 seconds. Fortunately gzip doesn't have the same issue. Because of this, it might be a good idea to enable Brotli for the production build, but not necessarily for the development builds.

Webpack Production Mode

By setting Webpack mode to production, the build size can be further reduced. In the case above, the html file size decreased to 7,6 MB and the compressed gzip file to 1,6 MB in production mode.

module.exports = {
  mode: 'development',
};

module.exports = {
  mode: 'production',
};

Conclusions

There are multiple ways to decrease the file size with Node. I hope this article helped you to make your next project faster.