window is not defined

[xxyyzz2050]

I'm using babel transpiler

function StitchAuthImpl(requestClient, browserAuthRoutes, authStorage, appInfo, jsdomWindow) {
        if (jsdomWindow === void 0) { jsdomWindow = window; }
        ...
}

//error: window is not defined

[jsflax]

Hi @xxyyzz2050 ,

Could you give us a bit more information? What step in the transpiration process are you at? What is the full stack trace?

Thanks.

[xxyyzz2050]

ok, I use Nuxt framework & latest version of Node.js and npm

[maredudd]

@jsflax I imagine that this might be due to using the SDK for SSR. I'm having the same issue with Next.js.

If fails on this line: client.auth.loginWithCredential(new AnonymousCredential()):

ReferenceError: window is not defined
    at new StitchAuthImpl (/xxx/node_modules/mongodb-stitch-browser-core/dist/cjs/core/auth/internal/StitchAuthImpl.js:28:39)
    at new StitchAppClientImpl (/xxx/node_modules/mongodb-stitch-browser-core/dist/cjs/core/internal/StitchAppClientImpl.js:15:21)
    at Function.Stitch.initializeAppClient (/xxx/node_modules/mongodb-stitch-browser-core/dist/cjs/core/Stitch.js:71:22)

This would be expected since window is undefined on the server side. I tried using the server SDK to retrieve the data on the server side but that fails since fs doesn't exist This results in the following code:

import {
  Stitch,
  RemoteMongoClient,
  AnonymousCredential
} from 'mongodb-stitch-server-sdk'

showing an error due to the missing dependency:

* fs in ./node_modules/fs-extra/lib/index.js, ./node_modules/fs-extra/lib/empty/index.js and 2 others

Are the SDKs expected to support SSR? Is there a workaround for this or is Stitch not an option with SSR?

Thanks.

[agstover]

I've been trying to figure out how Stitch can be used with SSR as well, particularly NextJS. Would one have to instantiate both a Stitch-Server SDK instance and a Stitch-Browser SDK instance, use the server instance if !window and use the browser instance if there is?

This also presents an issue with setting up sessions so that initial requests for logged in users can be server rendered. As an example of an alternative Auth flow, the official NextJS + Firebase Auth example works like this: 1) Login occurs client-side, 2) Request an Auth Token from Firebase client-side, 3) Pass Auth token to /login.js route, 4) Use Firebase to decode token, 5) Set HTTP Only cookie session with user info. Every subsequent request is immediately authenticated.

I'm not sure how this can be done with Stitch. Auth Token gets stored in local storage, but is there a way to get it? And if you could deliver it to the server, could you use it with Stitch-Server SDK to authenticate user server side and create a session?

[Ruegen]

I'm getting the same issue with Next.js
client.auth.loginWithCredential(new AnonymousCredential())
I'm guessing it needs access to the window object which won't be available since it's pre-rendered?

[Ruegen]

I've been trying to figure out how Stitch can be used with SSR as well, particularly NextJS. Would one have to instantiate both a Stitch-Server SDK instance and a Stitch-Browser SDK instance, use the server instance if !window and use the browser instance if there is?

This also presents an issue with setting up sessions so that initial requests for logged in users can be server rendered. As an example of an alternative Auth flow, the official NextJS + Firebase Auth example works like this: 1) Login occurs client-side, 2) Request an Auth Token from Firebase client-side, 3) Pass Auth token to /login.js route, 4) Use Firebase to decode token, 5) Set HTTP Only cookie session with user info. Every subsequent request is immediately authenticated.

I'm not sure how this can be done with Stitch. Auth Token gets stored in local storage, but is there a way to get it? And if you could deliver it to the server, could you use it with Stitch-Server SDK to authenticate user server side and create a session?

I used a stateful component that waits until the mount lifecycle (I'm using react hooks, useEffect) which only loads once the component mounts. This solves the problem for me in Next.js.. won't help with anything server side rendering...

[jsflax]

In the future, we hope to have a universal JS SDK. However, in the interim, @agstover is right. A solution could be to make your own isomorphic multiplexer file, i.e., an isomorphic-stitch.js file that does if node return nodesdk else browser sdk.

[xxyyzz2050]

Thank you @maredudd , yes the issue is due to SSR mode, thanks to you I now knew that there is a server version for SSR and I will try it

@jsflax good idea

[phillipmalboeuf]

+1 for SSR support

[Ruegen]

Trying to use Next.js with Stitch requires SSR support. Even one of the fetch dependancies isn't written for SSR so an alternative to whatwg-fetch would be better?

[adamchel]

Hi @phillipmalboeuf and @Ruegen , have you tried using mongodb-stitch-server-sdk? It's almost the same as the browser SDK, but it uses node-fetch instead of whatwg-fetch, but excludes some redirect auth functionality.

Let us know if that would be sufficient. Otherwise, we can look into offering a more general solution.

The problem with bundling a polymorphic fetch library in the browser SDK is the fact that some JS frameworks (such as NativeScript) will not let you bundle JavaScript libraries that contain NodeJS-based dependencies. See #207

[phillipmalboeuf]

Thanks @adamchel, using mongodb-stitch-server-sdk is not the solution, it's difficult to have to juggle between two librairies. Even having something like this gives me a ReferenceError: self is not defined error:

export const client = process.env.production
  ? require('mongodb-stitch-server-core').Stitch.initializeDefaultAppClient('***')
  : require('mongodb-stitch-browser-core').Stitch.initializeDefaultAppClient('***')
export const db = client.getServiceClient(process.env.production
  ? require('mongodb-stitch-server-services-mongodb-remote').RemoteMongoClient.factory
  : require('mongodb-stitch-browser-services-mongodb-remote').RemoteMongoClient.factory, '***').db('***')

The current system setup isn't SSR capable, and it's not just a matter of the fetch library. I believe the credentials storage method would need to be polymorphic as well.
I'll see if I can open a PR sometime this week and do deeper dive:)

Update
Would axios be fine as a polymorphic fetch library? NativeScript seems fine with it: https://www.nativescript.org/blog/make-http-requests-to-remote-web-services-in-a-nativescript-vue-app

[Ruegen]

Hi @adamchel, yes I’ve tried it however like Phillip I got the same errors. I got around it by only loading the package in on the client side - which involves a fair bit of trickery (not pretty), the server side can’t use the client side and vice versa. It would be better to have it load for SSR which would resolve a great deal of issues.

@phillipmalboeuf I believe the client side uses localstorage to save the credentials automatically.

[adamchel]

Thanks for the feedback everyone!

So, it's hard for us to provide truly isomorphic networking and storage because new javascript libraries with new requirements and nuances pop up all the time, and it's difficult for us to keep up. In the past we actually switched to an isomorphic fetch library to support more JS libraries, but then it caused problems with other JS libraries. This is just the state of the JS ecosystem 🤷‍♂️. That's why we've generally opted to provide the most basic storage and networking capabilities.

If you'd like to go on a deeper dive, it might be useful for you to know that we have abstracted the storage and network layer of the SDK into simple Transport and Storage protocols.

See:

• https://github.com/mongodb/stitch-js-sdk/blob/master/packages/core/sdk/src/internal/net/Transport.ts
• https://github.com/mongodb/stitch-js-sdk/blob/master/packages/core/sdk/src/internal/common/Storage.ts

If you know the limitations/requirements of the framework you're working with, you can implement a Transport or Storage that works for your environment, and specify it when configuring your Stitch client.

import { Stitch, StitchAppClientConfiguration } from "mongodb-stitch-browser-sdk";

// these currently do not exist
import { IsomorphicNetworkTransport } from "my-stitch-isomorphic-network-transport";
import { IsomorphicStorage } from "my-stitch-isomorphic-storage";

let client = Stitch.initializeAppClient(
    "your-client-app-id", 
    new StitchAppClientConfiguration.Builder()
        .withTransport(new IsomorphicNetworkTransport())
        .withStorage(new IsomorphicStorage())
        .build()
);

You can look at our existing Storage and Transport implementations as a reference, and we'd be happy to answer any questions you may have or any issues that come up:

Although this is something we'd personally like to work more on, we are juggling many other priorities. Building your own Transport and Storage (and opening a PR if you'd like) will probably be the fastest way to get the SDK working in some of these third party libraries where isomorphic libraries are necessary.

If you'd like to have a say in Stitch's product roadmap and the features that we should work on, please add a new issue or vote on existing issues at https://mongodb.canny.io/mongodb-stitch !

[phillipmalboeuf]

Oh interesting @adamchel, didn't realize the withTransport/withStorage configurations existed! Will take a look and keep you updated.