Netlify Identity Widget is being loaded on all pages in production

[smashercosmo]

Description

Netlify Identity Widget is being loaded on the index page in production. This makes user to load unnecessary 50kb of js.

Steps to reproduce

1. Add gatsby-plugin-netlify-cms to gatsby project
2. npm run build
3. npm run serve
4. Check network tab

Expected result

Netlify Identity Widget should be loaded only on the /admin page

Actual result

Netlify Identity Widget is being loaded on all pages in production

Environment

System:
OS: macOS Mojave 10.14
CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.15.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.7.0 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 79.0.3945.130
Firefox: 72.0.1
Safari: 12.0
npmPackages:
gatsby: 2.19.10 => 2.19.10
gatsby-image: 2.2.39 => 2.2.39
gatsby-plugin-netlify: 2.1.31 => 2.1.31
gatsby-plugin-netlify-cms: 4.1.37 => 4.1.37
gatsby-plugin-netlify-cms-paths: 1.3.0 => 1.3.0
gatsby-plugin-postcss: 2.1.19 => 2.1.19
gatsby-plugin-preact: 3.1.25 => 3.1.25
gatsby-plugin-react-helmet: 3.1.21 => 3.1.21
gatsby-plugin-sharp: 2.4.4 => 2.4.4
gatsby-plugin-svgr: 2.0.2 => 2.0.2
gatsby-plugin-typescript: 2.1.26 => 2.1.26
gatsby-plugin-webpack-bundle-analyzer: 1.0.5 => 1.0.5
gatsby-source-filesystem: 2.1.47 => 2.1.47
gatsby-source-hubspot: 2.0.3 => 2.0.3
gatsby-transformer-sharp: 2.3.13 => 2.3.13
gatsby-transformer-yaml: 2.2.23 => 2.2.23
npmGlobalPackages:
gatsby-cli: 2.7.34

[smashercosmo]

Ok, I've just read this comment #17568 (comment) and understood that it's by design that widget is included on every page. But what I didn't fully understand, is what are the exact steps you should make to exclude Identity Widget from the bundle, while still being able to login to the admin page? I understood it has something to do with different redirect URLs, but didn't figure out the complete solution. Maybe it's worth writing small tutorial in docs?

[smashercosmo]

// cc @erezrokah

[erezrokah]

This section was recently added to the readme: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify-cms#disable-widget-on-site

[smashercosmo]

mmm... I don't quite understand if following these instructions will still allow you to login via Identity Widget on the admin page?

[erezrokah]

When using gatsby-plugin-netlify-cms the plugin will include the identity widget by default in both the Gastby site and the CMS site under /admin. The reason it is required for both sites is that when using Netlify identity the default email verification link is to the root path, thus the widget is required for the Gatsby site to finalize the email verification process.
For the CMS the widget is required to actually facilitate the login process.
The instructions provided in the link will remove the widget just from the Gatsby site, but will keep it in the CMS under /admin.

[smashercosmo]

So, if you follow these instructions, you will still be able to login to /admin (assuming you already have verified credentials), but some newly invited users won't be able to verify their emails and finish registration process?

[erezrokah]

Exactly, another option is use email templates to change the verification link to redirect to /admin to support newly invited users.

[smashercosmo]

Exactly, another option is use email templates to change the verification link to redirect to /admin to support newly invited users.

Awesome) that's exactly the piece I've been missing. Thank you.

[smashercosmo]

Maybe worth adding this advice to the docs

[steverandy]

@erezrokah looking at this code https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify-cms/src/gatsby-browser.js

The netlify-identity-widget should be lazy loaded. But in my project the netlify-identity-widget module is actually preloaded. Any idea why?

[erezrokah]

Hi @steverandy what do you mean by lazy loaded? As long as you have enableIdentityWidget set to true (the default) the identity widget will be loaded with your site and the CMS.
Loading the widget with your site is required, as by default Netlify Identity user invites links send the user to the root page which need the widget to finalize email confirmation.

When enableIdentityWidget is false the widget's code won't be included in the bundle, so that code is required to prevent an error.

[steverandy]

Looking at this line https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify-cms/src/gatsby-browser.js#L16

The netlify-identity-widget module should not be loaded if the route does not match.
However in the latest version of gatsby-plugin-netlify-cms, it seems the module is always loaded no matter what.

I think this is a bug.

[erezrokah]

I recommend reading https://www.gatsbyjs.org/docs/how-code-splitting-works/ to understand how code splitting works in Gatsby.
Gatsby uses preloading and script tags with async attributes when doing code splitting.
This way the script doesn't block loading the page and is still available to execute as soon as possible.

[abdullahe]

This section was recently added to the readme: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify-cms#disable-widget-on-site

Hi. I don't know if it is better to open a new issue but trying what @erezrokah suggested above. When I try this, I see a blank page at /admin.

Here is the gatsby-config.js part:

{
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
        enableIdentityWidget: true,
        includeRobots: false,
        publicPath: `admin`,
      },
 },

And here is the gatsby-node.js part:

const webpack = require(`webpack`);

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      new webpack.IgnorePlugin({
        resourceRegExp: /^netlify-identity-widget$/,
      }),
    ],
  });
};