Allow using custom Passport LocalStrategy for local authentication

This is related to https://github.com/iaincollins/next-auth/issues/9 as it is about doing local authentication, but it is about using a custom Passport LocalStrategy I have written. Is it possible to use Passport LocalStrategy with next-auth? I tried creating a provider and passing the strategy in the Strategy property, but that wouldn’t work. I wonder if I am doing something wrong. Does it only work with OAuth providers?

providers.push({
  providerName: 'Local Login',
  providerOptions: {
    scope: ['profile', 'email'],
  },
  Strategy: require('./passport/local-login'),
  strategyOptions: {
  },
  getProfile(profile) {
    // Normalize profile into one with {id, name, email} keys
    return {
      id: profile.id,
      name: profile.displayName,
      email: profile.emails[0].value,
    };
  }
});

[iaincollins]

To confirm, you don’t call NextAuth.signin(), just post to the new end point.

You can do this using just a normal form post and/or in JavaScript.

You don’t actually also need to do it in JavaScript unless you want to - a normal form post will work just fine, but if you want to you could have a sign in method like this in your sign in page (assumes email and password are stored in ‘this.state’).

import React from 'react'
import Router from 'next/router'
import { NextAuth } from 'next-auth/client'

export default class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      email: '',
      password: ''
    }
    this.handleSignin = this.handleSignin.bind(this)
  }

  handleSignin() {
    // Make sure we include the latest CSRF Token in the POST request as _csrf
    const formData = {
      _csrf: await NextAuth.csrfToken(),
      email: this.state.email,
      password: this.state.password
    }
  
    // Encoded form parser for sending data in the body
    const encodedForm = Object.keys(formData).map((key) => {
      return encodeURIComponent(key) + '=' + encodeURIComponent(formData[key])
    }).join('&')

    return fetch('/auth/password', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: encodedForm,
      credentials: 'same-origin'
    })
    .then(response => {
      if (response.ok) {
        Router.push(`/auth/callback}`)
      } else {
        Router.push(`/auth/error?action=signin&type=password&email=${this.state.email}`)
      }
    })
  }
  
}

If you find this works for you I am happy to look at both adding localStrategy support and at changing NextAuth.signin() to work with them (so it can be passed options to post to a local strategy, e.g. username or email, password, 2-factor-auth-token, etc).

None of these changes should be breaking - so anything you have done will keep working! - but should make it easier for anyone else in future.

[kelleg1]

@iaincollins I did this, added a password field to the signin component, and updated my form action URL to /auth/password and it works with JavaScript disabled, but when JavaScript is enabled the call to NextAuth.signin() in handleSubmit() ends up sending the verification email anyway, I think because next-auth-client does the POST to /auth/email/signin. Should I not call NextAuth.signin()? Can I use next-auth/next-auth-client when wanting to have password authentication?

I understand the single-use login token links sent via email can be seen as more secure than keeping passwords, but I am in an organization that precludes me from doing it that way.

Support for password-based authentication would be great, but I really just want to get this working the way I need. I had considered rolling back and modifying the code from before you moved it to the next-auth module, but I am so far down the line now there would be a lot to do over again.