SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).

SuperTokens.com

Hi everyone, I'm trying to add Passwordless authentication using the Prebuilt UI to my React app (using latest versions of `supertokens-auth-react` and `react-router-dom`) but I'm hitting an issue when the app loads:

`Uncaught Error: No instance of Passwordless found. Make sure to call the Passwordless.init method`

 I'm initialising SuperTokens and Passwordless at the root of my application (see thread for code snippets) and I've checked and all the imports resolve to the same module in case they were pointing at different ones and using different contexts so I'm a little confused 😆 .  Can anyone point me in the direction of where I might be going wrong please?

```
import SuperTokens from "supertokens-auth-react";
import Passwordless from "supertokens-auth-react/recipe/passwordless";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
  appInfo: {
    appName: "local",
    apiDomain: "http://localhost:4000",
    websiteDomain: "http://localhost:3000",
    apiBasePath: "/auth",
    websiteBasePath: "/auth",
  },
  recipeList: [
    Passwordless.init({
      contactMethod: "EMAIL",
    }),
    Session.init(),
  ],
});
```

And have the following in my router:

```
import * as reactRouterDom from "react-router-dom";
import { createBrowserRouter } from "react-router-dom";
import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";

export const App: React.FC = () => {
  return (
    <SuperTokensWrapper>
      <RouterProvider router={AppRouter} />
    </SuperTokensWrapper>
  );
};

export const AppRouter: ReturnType<typeof createBrowserRouter> =
  createBrowserRouter([
    ...getSuperTokensRoutesForReactRouterDom(reactRouterDom, [
      PasswordlessPreBuiltUI,
    ]).map((route) => route.props),
    {
      path: "*",
      element: <AppRoutes />,
    },
  ]);
```

The router differences vs the tutorial are taken from the issue detailed here https://github.com/supertokens/supertokens-auth-react/issues/581.

this error usually happens if:
- you are renderingn our passwordless UI on the backend during SSR; OR
- you are rendering our UI before calling the init function.

I'd suggest that you try out our demo app (`npx create-supertokens-app@latest`) and see the diff between the generated app and yours.

Cheers for the quick reply! I'm not using SSR so it's going to be something like the latter.

I've pulled the sample down and can see the main difference - looks like the version of `react-router` being used is 6.2 vs the latest of 6.19 and therefore the use of `BrowserRouter` vs `createBrowserRouter` that was introduced in 6.4 which the latter is advised in the react-router-dom docs.

Reading through the docs I wonder if it's potentially because the component is created via the `element` prop and rendered/reused when the route matches?  I've not looked into the internals of the `getSuperTokensRoutesForReactRouterDom` yet to see what it's exporting but does that sound like a reasonable theory?

hmmm. I don't think that this change in react router dom would cause this. The init creates a global singleton instance of passwordless which should be accessiable from anywhere once you have called the init

The only thing is you need to make sure you have called the init before calling `createBrowserRouter`

I'm having this same problem. I've spent 2 hours and it's been impossible to integrate, I don't know how to do it.

The tutorial needs an update for react-router 6.2, please.