GCP Dshop Instance Authentication Flow Seems To Break After Minor Code Changes

[sifdogg]

CONTEXT

After making a small change to the front end code and building the app successfully, GCP Dshop instance hangs on login page and doesn't proceed to super-admin dashboard. Login with correct credentials simply refreshes the page and doesn't direct me to the super-admin dashboard. Wrong login credentials produce an Unauthorized error as expected. I can't seem to regain access to the super-admin dashboard.

PROCESS

1. Deploy GCP Dshop instance and configure super-admin
2. Add svg logo below the OriginDshop logo by adding the svg code to shop/src/components/icons/MyLogo.js and importing the icon in shop/src/components/pages/super-admin/setup/_SetupLayout.js
<div className="logo"> <DshopLogoWhite /> <MyLogo /> </div>
3. Then cd shop and yarn run build:dist which compiles successfully.

EXPECTED RESULT

Return to Dshop login page, enter credentials and be redirected to super-admin dashboard

CURRENT RESULT

Entering correct credentials does not redirect to super-admin dashboard, just a page refresh and login prompt again. Entering wrong credentials gives Unauthorized error as expected.

ATTEMPTED FIXES

5. rm -rf node_modules in root, shop, backend and packages/services then yarn in root, yarn run build:dist and both compile successfully

6. Return to Dshop and issue still not resolved, still can't gain access to super-admin dashboard.

7. Terminate and Delete instance.

8. Deploy fresh GCP Dshop instance, configure super-admin but this time don't log out of dashboard + change default password + keep browser window open.

9. Repeat steps 2 & 3

10. Ctrl + F5 browser window and this time try to logout of the super-admin dashboard. Issue persists.

FINDINGS

Unrelated changes to code (e.g add svg logo to login page) seem to affect the Authentication process.
In the first Instance, I couldn't login after logging out and making changes.
In the second Instance, I couldn't logout after logging in, keeping browser open, making changes and Ctrl + F5.

Any ideas on how to resolve?

[micahalcorn]

Nice writeup @sifdogg, thanks 🙏 I'm not sure how soon we'll be able to take a look at this but we'll try to do so.

[mikeshultz]

Thanks for writing this up. I'll try to find time in the next couple of days to see if I can reproduce this issue.

[mikeshultz]

@sifdogg Can you check the devtools console when you see a white screen (F12 in Chrome)?

If you see something like this:

Uncaught Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

You may need to update your webpack.config.js to support image loading. I added this to module.rules in webpack.config.js and got SVG imports working:

  {
    test: /\.(png|jp(e*)g|svg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: 'images/[hash]-[name].[ext]',
        },
      },
    ],
  }

Looks like the way we currently use SVG is we add the SVG XML directly in component files.

If that doesn't help, can you provide the code for you component MyLogo?

[sifdogg]

@mikeshultz

Update: I also get the same issue on AWS instance

devtools console shows :

notifhook.js:3 Uncaught ReferenceError: webkitNotifications is not defined at notifhook.js:3 at notifhook.js:21 (anonymous) @ notifhook.js:3 (anonymous) @ notifhook.js:21 /#/admin:1 Unchecked runtime.lastError: The message port closed before a response was received. /#/admin:1 Unchecked runtime.lastError: The message port closed before a response was received.

Example of similar code for the MyLogo component:

import * as React from "react"

export const DshopLogoTagLine = () => (


<path
d="M2.167 17.853l-1.73-3.38h-1.52v3.38h-1.9v-9.24h3.43c1.093 0 1.937.243 2.53.73.587.487.88 1.173.88 2.06 0 .633-.137 1.16-.41 1.58-.267.42-.68.753-1.24 1l2 3.78v.09h-2.04zm-3.25-7.7v2.77h1.54c.473 0 .843-.12 1.11-.36.26-.247.39-.583.39-1.01 0-.433-.123-.777-.37-1.03-.247-.247-.627-.37-1.14-.37h-1.53zm12.245 7.7l-.64-1.9h-3.34l-.63 1.9h-2.03l3.44-9.24h1.77l3.46 9.24h-2.03zm-2.31-6.91l-1.15 3.46h2.31l-1.16-3.46zm8.796 6.91h-3.59v-9.24h3.23c1.12 0 1.97.213 2.55.64.58.433.87 1.063.87 1.89 0 .453-.117.853-.35 1.2a2.03 2.03 0 01-.97.76c.473.113.847.35 1.12.71.273.36.41.8.41 1.32 0 .893-.283 1.567-.85 2.02-.567.46-1.373.693-2.42.7zm.06-4.02h-1.75v2.49h1.63c.447 0 .797-.107 1.05-.32.253-.213.38-.51.38-.89 0-.847-.437-1.273-1.31-1.28zm-1.75-3.68v2.33h1.41c.96-.02 1.44-.403 1.44-1.15 0-.42-.123-.72-.37-.9-.24-.187-.623-.28-1.15-.28h-1.33zm11.185 5.28c0-.36-.126-.637-.38-.83-.253-.193-.71-.397-1.37-.61-.66-.213-1.183-.423-1.57-.63-1.053-.567-1.58-1.333-1.58-2.3 0-.493.144-.937.43-1.33.28-.393.684-.7 1.21-.92.527-.22 1.117-.33 1.77-.33.66 0 1.25.12 1.77.36.514.24.914.577 1.2 1.01.287.44.43.937.43 1.49h-1.91c0-.427-.133-.757-.4-.99-.266-.233-.64-.35-1.12-.35-.466 0-.826.097-1.08.29a.94.94 0 00-.39.78c0 .3.15.553.45.76.307.2.754.39 1.34.57 1.08.327 1.87.73 2.37 1.21.494.48.74 1.08.74 1.8 0 .8-.303 1.427-.91 1.88-.606.46-1.42.69-2.44.69-.713 0-1.363-.13-1.95-.39-.58-.26-1.023-.617-1.33-1.07-.306-.453-.46-.98-.46-1.58h1.91c0 1.02.61 1.53 1.83 1.53.454 0 .807-.09 1.06-.27a.902.902 0 00.38-.77zM46.71 8.619v9.24h-1.9l-3.71-6.08v6.08h-1.9v-9.24h1.9l3.71 6.09v-6.09h1.9z"
style={{
whiteSpace: "pre"
}}
/>

)

[mikeshultz]

That error doesn't really make sense to me. notifhook.js is not a file in our codebase, that I can see (not obviously part of a dependency, either). Have any browser extensions that might be fooling around with the app? You could try opening an incognito window and running a session there.

[mikeshultz]

Went through the repro steps. Setup a node on AWS. Did first login/reg, and configured the node. Used the code you provide for MyLogo.js.

sudo -u dshop vim /app/dshop/shopsrc/pages/super-admin/setup/MyLogo.js

Imported it in _SetupLayout.js:

import { DshopLogoTagLine } from './MyLogo'

Built it:

cd /app/dshop/shop
sudo -u dshop yarn run build:dist

Restart the service

sudo systemctl restart pm2-dshop.service

And was able to login again. If you get further information, update the issue.

[sifdogg]

Everything's working perfectly now. From my understanding, the issue arose because I had switched node versions as I was under the impression that Dshop works with node v14 from the local development documentation. Thank you guys.