next apollo auth

next.jsとapolloの認証例

この例は、next.jsおよびapollo graphqlで認証を実装する方法を示しています。

使用される主なテクノロジー

• Apollo GraphQl
• Express.js
• Express Validator
• next.js
• passport.js
• Passport-Local-Mongoose
• Passport-Github

コンテンツ

• プロジェクト構造
• 突然変異
  • スキーマ
  • リゾルバー
• モデル
• 展開する

プロジェクト構造

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

突然変異

スキーマ

ここには、3つのフィールド（電子メール、フルネーム、パスワード）を備えた1つのUserのタイプがあります。クエリタイプを定義することについてGraphQLの口を閉じたままにするためだけに、プロファイルフィールドのQueryタイプが1つあります。 2つのMutationタイプ（ログインとサインアップ）があります。

 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
} 

リゾルバー

ここで気にかけているリゾルバーは、 createUserとloginです。彼らは両方とも、 createUser追加のfullname引数を取得するという議論としてemailとpasswordを取り入れます。

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

モデル

おっと！モデル（ユーザー）は1つだけです。電子メールを受け入れ、 express-validatorを使用して電子メールを検証します。次にpassport-local-mongoose電子メールフィールドをデフォルトのusernameFieldとして使用するように指示するプラグインがあります。

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

展開する

ライセンス

mit