Login Form Does Not Display on HTML Page

Questions
1

I am creating a Members Page for this Website. I already have the Members Page tested. But the Login page has issues. The only thing that displays on my Login Page is the title. You can look at the code when you display the Developers Tools (Chrome) there are two syntax errors. “” You cannot have comments in a module. The other is “products: [Products.emailMagicLinks],” The “Products” are not defined. When I search for activities under “Stytch Event” logs I get Success feedback. So what am I doing wrong? Warren

2

Hey there!

The SyntaxError: HTML comments are not allowed in modules isn’t something specific to Stytch’s SDKs. I believe you cannot use HTML comments in script elements and JS syntax comments should be used instead. Some online resources like this one may help with looking into this error.

Regarding the second error, could you please confirm which Stytch frontend SDKs you’re using? Additionally, we noticed that your Project appears to be B2B and not Consumer auth, is that accurate?

This error tends to happen when you’re missing an import. For B2B and @stytch/vanilla-js for example, you’ll want to do something similar to the following:

import { B2BProducts, AuthFlowType } from "@stytch/vanilla-js";

// ...
  const config = {
    // ...
    products: [B2BProducts.emailMagicLinks, B2BProducts.oauth], // any other products you want to enable
    // ...

You can find a more in-depth guide with code snippets here: Stytch and frontend development (pre-built ui) | Stytch B2B authentication

and full configuration reference here, since it sounds like you’re using our pre-built UI login components: JavaScript SDK - UI config | Stytch B2B authentication

Please let us know if you have any questions!

3

Hey Johanan,

Thanks for your comments. I added “B2BProducts” as you suggested but the Products syntax error persists. I still do not see any login form appearing on my login page, just the title. I now have a third syntax error. See the attached screen capture for the specifics.

Favicon
Favicon1151×792 93.5 KB

4

Regarding the Stytch Frontend I am using - I believe I am using @stytch/vanilla-js.

import {B2BProducts, StytchUIClient, Products } from 'https://www.unpkg.com/@stytch/vanilla-js'; // Initialize the Stytch client with your Public Token const stytch = new StytchUIClient('xxxxxxxxxxxxxxxx'); Yes I am using B2B so I can get the members of my organization authenticated against a list that I will make for the organization on the dashboard.
5

Hey Warren,

Thanks for your reply.

I’m not sure the 404 error is related to Stytch (it looks like it’s failing to get an icon on the site).

Could you please try using StytchB2BUIClient instead of StytchUIClient? Generally you’ll want to use the B2B-specific objects/etc. to ensure you’re not getting unexpected errors. We also recommend taking a look at some of our example apps in our example monorepo - these can be helpful as an additional reference! Here’s a link to the B2B pre-built one: stytch-all-examples/frontend/vanillajs/prebuilt/b2b at main · stytchauth/stytch-all-examples · GitHub

6

Hey Johanan,

Thanks for the heads-up. I will study this tomorrow and let you know. The little snippets can be useful for an experienced programmer but for people who haven’t had experience as much we need the prebuilt code that you just have to change some variables to fit your needs.

Warren