Server side customer login

[Ojay]

Hi there,

I'd love the ability to log a user into their Swell account from the server, specifically within a middleware file (Nextjs app router). We're using Swell to add a subscription service to our app, in conjunction with Auth0 for authentication. A user selects their plan on the app, is redirected to a hosted Auth0 sign-up page, and then redirected back to our app.

The middleware steps in here and handles everything Swell, it...

1. Checks to see if a Swell Customer exists
2. If not it creates one
3. Retrieves the cart (created on the sign-up page)
4. Updates the cart with the newly created Swell user's details (email)
5. ...

At this point I have to redirect to a temp page in my app, log the user in to Swell and then redirect to the Swell-hosted checkout (Plan page > Auth0 > Middleware > Temp page > Swell Checkout). Ideally, I'd like to log the user into their Swell account using some tokenised login server side, and then redirect directly to the Swell-hosted checkout (Plan page > Auth0 > Middleware > Swell Checkout).

Not being able to authenticate server-side adds a whole lot of extra time to the process, handling the login and redirect seems to take a while on the temp page.

I'm pretty desperate for a solution to this, so any help would be really appreciated.

Thanks so much!

Mark

[ericingram]

You can use Swell.js on the server, which will create/update a cookie that should be sent back to the browser allowing the customer to be authenticated by the next step. Have you tried that?

[Ojay]

Thanks for getting back to me @ericingram - I have tried it, but unfortunately, it doesn't work as middleware runs on edge runtime. Here's the build error I received:

Failed to compile.
./src/services/actions/swell/swellClient.ts
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime 
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
The error was caused by importing 'swell-js/dist/index.mjs' in './src/services/actions/swell/swellClient.ts'.
Import trace for requested module:
  ./src/services/actions/swell/swellClient.ts
  ./src/middleware.ts
> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1

Maybe the learn more link in those logs will shed some light on the why's behind it not working.

swellClient.ts contains my login function...

export async function swellLoginWithToken(
  user: User
): Promise<SwellResponse<SwellUser>> {
  try {
    if (!user) {
      throw new Error('No user session found');
    }

    const token = await updateSwellUserPasswordToken(user);

    const loggedInUser = (await sw.account.login(user.email, {
      password_token: token,
    })) as SwellResponse<SwellUser>;

    return loggedInUser;
  } catch (error) {
    throw new Error('Error logging in Swell user', {
      cause: error,
    });
  }
}

updateSwellUserPasswordToken(user); is a server-side function that uses fetch...

export async function updateSwellUserPasswordToken(
  auth0User: User
): Promise<any> {
  if (!auth0User) {
    throw new Error('No user session found');
  }

  const user = auth0User;

  try {
    const response = await fetchFromSwell(`/accounts/${user.email}`, {
      method: 'PUT',
      body: JSON.stringify({
        password_token: null,
      }),
    });

    return response?.password_token;
  } catch (error) {
    console.error('Error updating Swell user:', error);
    throw new Error('Error updating Swell user', {
      cause: error,
    });
  }
}

The long and short of it is I either need a server-side swell library that handles auth or to interact directly with the Swell APIs, via fetch. But, from what I can see, there's no way to do that?

[sags95]

One possibility would be to use the GQL API, the loginAccount mutation does accept a passwordToken argument.

[Ojay]

Thanks for getting back to me @sags95 - though, the mention of GQL reminds me of some previous issues we had, and the state of that library in general.

[sags95]

@Ojay The only other way would be through swell-node, you can do something like this but it only works with a password:

const account = await swell.get('/accounts/:login', { email, password })

It should return an account record if available, or null if not found. But then you would have to manage the auth session.