next apollo auth

Contoh auth dengan next.js dan apollo

Contoh ini menunjukkan cara menerapkan otentikasi dengan next.js dan apollo graphql.

Teknologi utama digunakan

• Apollo GraphQL
• Express.js
• Validator ekspres
• Next.js
• Paspor.js
• Paspor-Local-Mongoose
• Paspor-Github

Isi

• Struktur proyek
• Mutasi
  • Skema
  • Penyelidik
• Model
• Menyebarkan

Struktur proyek

├── 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

Mutasi

Skema

Di sini kami memiliki tipe satu User dengan tiga bidang (email, nama penuh dan kata sandi), satu jenis Query dengan bidang profil hanya untuk menutup mulut GraphQL tentang memiliki jenis kueri yang ditentukan. Kami memiliki dua jenis Mutation (login, dan pendaftaran).

 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
} 

Penyelidik

Penyelidik yang kami pedulikan di sini adalah createUser dan login . Mereka berdua menerima email dan password sebagai argumen dengan createUser mengambil argumen fullname ekstra.

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' )
					}
				} )
			} )
		}
	}

Model

Ups! Kami hanya memiliki satu model (pengguna). Ia menerima email, memvalidasi email dengan express-validator . Kemudian kami memiliki plugin untuk memberi tahu passport-local-mongoose untuk menggunakan bidang email kami sebagai usernameField default.

 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'
	}
} )

Menyebarkan

Lisensi

Mit