The @verida/account-web-vault package doesn't work in a Next.js application by default

[andy-verida]

Issue

When implementing Verida SSO on a Next.js app, we install the @verida/account-web-vault dependency. Upon running the application, there's an error loading the Sora font used by the login modal.

Workaround

Update the Next.js configuration to support loading static font files.

• Install file-loader

yarn add -D file-loader

• In the file next.config.mjs

const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          publicPath: '/_next/static/fonts/',
          outputPath: `${isServer ? '../' : ''}static/fonts/`,
        },
      },
    });

    return config;
  }
}

Some solutions

• Create an instruction for Next.js users
• Create a dedicated @verida/account-web-vault-nextjs
• How to identify a Next.js application and handle it in the code (not sure we can do that)

[andy-verida]

Another issue, by default the login modal shows 2 QR codes at once, and the layout is broken.

[aurelticot]

@andy-verida what's the error with the font? Is the error raised by Next or is it the browser saying the font is missing? Or "just" the layout/content is broken?

In any case the modal should define the font-family with Sora as the first one but also generic names as fallback (like "sans-serif"), so that if the Sora font is not available, the browser will be able to manage.

Then, as the modal tries to load the Sora font from a certain URL. Yes, we could find a way that works for both Next and other implementation, and/or we could load the font from a external CDN.
If the above doesn't work, then we could give some instructions for developers integrating on Next.

[andy-verida]

@aurelticot for now the app won't be built without that Next.js config.
I agree changing the font to load from CDN and having a fallback font is a better approach.