Is IE11 intended to be supported?

[BenjaminWFox-Lumedic]

Your question
I saw one issue from 2018 regarding IE11, but nothing since. It is supported (or intended to be supported)?

I'm having problems with it, specifically once I introduce the Provider component. I also noticed that the next-auth-example project had issue, although not the same once I was having.

If it's not supported though I won't bother y'all with them 😄 If it is supported, I'll open a new issue specific to the problem with additional detail.

Documentation feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[iaincollins]

So in theory yes, but we haven't actively done any work to add it to the example project or explain how to set it up.

@yournatalita did some work on this in the example repo, but I've since turned off issues on there as people were raising next-auth issues there instead of here so I'm not sure if that thread is accessible now.

Based on an issue she raised (which I ran into trying to add it to the example project too) in I made some changes in v3 which should make it easier to do (specifically, changing how dynamic imports work so it shouldn't also require mongodb to be present as as a dev dependancy to build for IE) but I haven't had a chance to test that change out yet.

It would be great to add IE support to next-auth-example and something I've been meaning to go back to now v3 is out.

If this is something you fancy trying out I'd be happy to test it!

Probably setting just GitHub as a Provider would be quick and easy and enough to test.

PS: Happy to give you access to the next-auth-example repo if you'd like to collaborate on a branch there (and I could wire that branch up to a test URL so it's easy to try changes out on a live site).

[BenjaminWFox-Lumedic]

I wouldn't mind looking in to it, but I need to see if I can get a better windows environment first...the only windows machine I have at the moment is very unpleasant to work on. I'll keep you posted!

[brett-chisholm]

I'm also having issues with accommodating IE11! I've cloned the repo, and added IE11 pollyfills via a babel config, and it works, but this isn't an ideal solution I'd be comfortable PR'ing because of the amount of bloat it adds. If there was another direction being taken I'd be happy to take a look if you can point me in the right direction!

[BenjaminWFox]

@brett-chisholm I haven't had any time to look into this besides similarly updating Babel (steps below for reference). Not sure if your steps were the same, but with this I saw a ~60% larger bundle size - definitely sub-optimal - otoh it's also "only" 124kb which may be acceptable depending on how important the feature is?

This is not a solution, but a great article that articulates this problem and potential future solutions:
https://dev.to/garylchew/bringing-modern-javascript-to-libraries-432c

Babel updates for IE11
I installed core-js and regenerator-runtime, imported them in the client index.js file, and updated the babel.config.json as below. I was able to sign in via the Google provider with those, although there were some oddities around the signin & signout 'stickiness' that I didn't look into.

// src/client/index.js
import "core-js/stable"
import "regenerator-runtime/runtime"
import { useState, ...

// babel.config.json
["@babel/preset-env",
  {
    "useBuiltIns": "entry",
    "corejs": 3,
    "targets": {
        "ie": "11"
    }
  }
]

[brett-chisholm]

This is pretty much the same line I went down! I did also look at alternative bundles, but again, it doesn't seem to be a viable option. I'd be interested to see what work was done in the next-auth-example repo as I'd rather not have to create a fork next-auth. Hopefully we can live in an IE11 free world sooner rather later!

[iaincollins]

@brett-chisholm @BenjaminWFox Thanks both for your feedback.

That increase in bundle size sounds about right; version 1.0 included IE support at some point and it did the same thing to the bundle size (and people complained!).

Having an easy to follow tutorial with 'install this module and put this in your babel config' would be a great way to handle it - and it would make a great candidate for an example project.

I'm glad it's not horribly choking and that it sounds like some of the improvements in 3.1 have made it break less.

I'll try out the example above and see if I can shake out any issues!

[mingyeungs]

I'm attempting to add IE 11 support to a project using credential login, but cannot get it to work as expected. (using next.js 9.5.3 & next-auth 3.1.0). Here're some findings:

• getSession works as expected
• useSession, signIn and signOut causes error (simply importing either of them causes errors)
  • in 'npm run dev' mode, they causes Object doesn't support property or method 'attachShadow' repeatedly
  • in 'npm run build && npm run start' mode, they causes Syntax error (probably due to ES6 arrow syntax) and stop any javascript from running.

I tried to follow @BenjaminWFox 's comment but it doesn't work for me (though I was trying to import 'core-js/stable' and 'regenerator-runtime/runtime' in /page/_app.js instead...as I ain't sure how I should use /src/client/index.js?)

I then try another fix by installing 'next-transpile-modules (4.1.0)'. By putting the following lines in next.config.js the errors are gone in either DEV or START mode.

const withTM = require('next-transpile-modules')(['next-auth']);
module.exports = withTM();

However, useSession still won't work - most of the time it is 'undefined'; occasionally it gets populated and the value stay there even after signing out.

Are there a suggested way of adding IE11 support? I don't really mind the extra bulk, but do need to get it done...thanks a lot!

[viniciustrindade]

Object doesn't support property or method 'attachShadow' You can solve with @webcomponents/shadydom polyfill. see vercel/next.js#13231

[mingyeungs]

Btw these are the simplified code:

// next.config.js
const withTM = require('next-transpile-modules')(['next-auth']);
module.exports = withTM();

// pages/index.js
import React from 'react'
import { signIn, signOut, getSession, useSession } from 'next-auth/client'

export default function Page({ serverSession }) {
  const [ session, loading ] = useSession()

  return <div>
    useSession result: { session ? session.user.name : '-' }<br />
    getSession result: { serverSession ? serverSession.user.name : '-' }<br />
    <button onClick={signIn}>Sign in</button>
    <button onClick={signOut}>Sign out</button>
  </div>
}

export async function getServerSideProps(context) {
  const session = await getSession(context)
  return {
    props: { serverSession: session }
  }
}

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

const options = {
  site: process.env.NEXT_PUBLIC_SITE,
  providers: [
    Providers.Credentials({
      name: 'Credentials',
      credentials: {
        password: { label: "Password", type: "password" }
      },
      authorize: async (credentials) => {
        const user = ( credentials.password === 'foo' ) ? { id: 0, name: 'bar' } : null;
        return Promise.resolve(user);
      }
    }),
  ]
}
export default (req, res) => NextAuth(req, res, options)