Keystone: Module parse failed: Unexpected token When adding auth-passport package and creating strategy

[IonutMorariu]

Bug report

Describe the bug

A clear and concise description of the bug.

To Reproduce

Steps to reproduce the behaviour. Please provide code snippets or a repository:

1. Create the starter project
2. Add auth-passport package
3. Create Google Auth strategy
4. Go to adminUI

ERROR in <user folder>/node_modules/@keystonejs/auth-passport/node_modules/@keystonejs/app-admin-ui/client/components/ListTable.js 102:5
Module parse failed: Unexpected token (102:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
 // Functional Components
> type SortLinkProps = {
handleSortChange: Function,
active: boolean,

The same Error appears for a multitude of files

System information

• OS: Ubuntu
• Browser:Firefox

Additional context

Add any other context about the problem here.

[stefanhar]

I have the same error caused by importing and using byTracking.

const { byTracking } = require('@keystonejs/list-plugins')
keystone.createList('Somelist', {
  fields: {
    amount: { type: Integer }
  },
  plugins: [byTracking()]
})

[rjbernaldo]

Hey guys, so after spending some time on this one, I've found that google auth is not supported yet. I've sent a pull request to update the documentation but for further details, please read on.

1. If you look at app-admin-ui/index.js:12:

class AdminUIApp {
  constructor({
    ...
    authStrategy,
    ...
  } = {}) {

The AdminUIApp constructor needs to be initialized with authStrategy like so (this part is missing from the docs which is where to confusion is coming from)

module.exports = {
  keystone,
  apps: [
    new GraphQLApp(),
    new AdminUIApp(
      authStrategy: googleStrategy,
    ),
  ],
};

Unfortunately, this doesn't really help as the app will just throw an error app-admin-ui/index.js:28:

if (authStrategy && authStrategy.authType !== 'password') {
  throw new Error('Keystone 5 Admin currently only supports the `PasswordAuthStrategy`');
}

because PassportAuthStrategy has the following authType from auth-passport/lib/Passport.js:518

PassportAuthStrategy.authType = 'base-abstract';

[molomby]

Yeah those docs could definitely use some improvement. The errors too could be a lot more helpful.

However, it's more accurate to say that only password auth is currently supported _in the admin UI_. Other auth strategies still work when using the GraphQL endpoint.

Case in point -- we've been using Google auth (and twitter) on a KS project in production for the last 6 months or so. It lets users sign up to the website, etc. A small number of admins (who need access to the Admin UI) have passwords.

Some Keystone projects don't require the Admin UI at all.

[rjbernaldo]

I tried using Google auth on the graphql endpoint: I see that authStrategy option is not even supported for the GraphQLApp() so I tried to run some custom middleware and so far it was working but it's still giving me the issue above when accessing the admin dashboard via password.

Can you please share a basic overview of how you set that KS project up @molomby ?

[zenflow]

However, it's more accurate to say that only password auth is currently supported in the admin UI. Other auth strategies still work when using the GraphQL endpoint.

@molomby Isn't it kind of odd that passport auth is not supported by AdminUIApp, but it is supported by GraphQLApp, when auth strategy is an option only given to AdminUIApp (not GraphQLApp)?

const apps = [
  new GraphQLApp(),
  new AdminUIApp({ authStrategy: passportAuthStrategy }),
];

Probably "auth strategies" should have been independent "apps" to compose with your graphql app, admin ui app, etc. I would actually be super excited to collaborate and work on these new apps (app-password-auth, app-passport-auth) if there is interest in going that way.

[zenflow]

Regardless of that..

After some playing around, I found that it wouldn't take much effort at all to make AdminUIApp work with passport auth!

I am working on a PR now, and I hope that @molomby can review and merge! (?) 😃

It would be fantastic to have seamless support for both social signin (passport auth) & admin UI!

[zenflow]

OK I opened issue #2658 because I think this "make AdminUIApp work with passport auth" stuff may be off topic of the original issue.

@molomby Would you be at all able to review my changes in PR #2657 (which include making the Admin UI support passport auth)?

[MadeByMike]

There is actually a pre-existing issue: #2334 for this. I agree with @zenflow the title of this issue is not the same as support passport auth for admin UI. Cross-linking because these notes are relevant!