next apollo auth

Exemple de l'autheet avec next.js et apollo

Cet exemple montre comment implémenter l'authentification avec Next.js et Apollo GraphQL.

Mais-principaux technologies utilisées

• Apollo GraphQL
• Express.js
• Validateur express
• Next.js
• Passport.js
• Passeport-local-mongoose
• Passeport-github

Contenu

• Structure du projet
• Mutations
  • Schéma
  • Résolve
• Modèles
• Déployer

Structure du projet

├── components
│   └── forms
│   ├── login.js
│   └── signup.js
├── lib
│   ├── initApollo.js
│   └── withData.js
├── pages
│   ├── index.js
│   ├── login.js
│   └── signup.js
└── server
├── data
│   ├── resolvers.js
│   └── schema.js
├── models
│   └── User.js
├── services
│   └── passport.js
└── index.js

Mutations

Schéma

Ici, nous avons un type d' User avec trois champs (e-mail, nom complet et mot de passe), un type Query avec un champ de profil juste pour garder la bouche de GraphQL sur le fait d'avoir un type de requête défini. Nous avons deux types Mutation (connexion et inscription).

 type User {
	email: String
	fullname: String
	password: String
}

type Query {
	profile : User
}

type Mutation {
	createUser ( email : String ! , fullname : String , password : String ! ) : User
	login ( email : String ! , password : String ! ) : User
} 

Résolve

Les résolveurs dont nous nous soucions ici sont createUser et login . Ils absorbent tous deux email et password comme arguments avec createUser prenant un argument fullname supplémentaire.

Mutation: {
		createUser ( root , { email , fullname , password } , { login } ) {
			const user = new User ( { email , fullname } )

			return new Promise ( ( resolve , reject ) => {
				return User . register ( user , password , err => {
					if ( err ) {
						reject ( err )
					} else {
						login ( user , ( ) => resolve ( user ) )
					}
				} )
			} )
		} ,
		login ( root , { email , password } , { login } ) {
			return new Promise ( ( resolve , reject ) => {
				return User . authenticate ( ) ( email , password , ( err , user ) => {
					// user returns false if username / email incorrect
					if ( user ) {
						login ( user , ( ) => resolve ( user ) )
					} else {
						reject ( 'Email / Password Incorrect' )
					}
				} )
			} )
		}
	}

Modèles

Oups! Nous n'avons qu'un seul modèle (utilisateur). Il accepte l'e-mail, valide l'e-mail avec express-validator . Ensuite, nous avons un plugin pour dire à passport-local-mongoose pour utiliser notre champ de messagerie comme le usernameField par défaut.

 const userSchema = new Schema ( {
	email : {
		type : String ,
		unique : true ,
		lowercase : true ,
		trim : true ,
		validate : {
			isAsync : true ,
			validator : ( v , cb ) =>
				cb ( validator . isEmail ( v ) , ` ${ v } is not a valid email address` )
		} ,
		required : 'Please Supply an email address'
	} ,
	fullname : String
} )

userSchema . plugin ( passportLocalMongoose , {
	usernameField : 'email' ,
	errorMessages : {
		UserExistsError : 'Email Already Exists'
	}
} )

Déployer

Licence

Mit