Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ooade/next-apollo-auth
Authentication Boilerplate with Next.js and Apollo GraphQL
https://github.com/ooade/next-apollo-auth
apollo authentication expressjs graphql nextjs
Last synced: 1 day ago
JSON representation
Authentication Boilerplate with Next.js and Apollo GraphQL
- Host: GitHub
- URL: https://github.com/ooade/next-apollo-auth
- Owner: ooade
- Created: 2017-11-30T12:06:00.000Z (about 7 years ago)
- Default Branch: dev
- Last Pushed: 2024-10-19T06:50:33.000Z (about 2 months ago)
- Last Synced: 2024-11-29T10:05:35.038Z (13 days ago)
- Topics: apollo, authentication, expressjs, graphql, nextjs
- Language: JavaScript
- Homepage: https://next-auth-apollo.now.sh
- Size: 1.38 MB
- Stars: 202
- Watchers: 3
- Forks: 36
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-apollo-graphql - Next.js Auth With Apollo - Authentication Boilerplate with Next.js and Apollo GraphQL. (Uncategorized / Uncategorized)
README
# Auth Example with Next.js and Apollo
This example shows how to implement Authentication with Next.js and Apollo GraphQL.
## Main Technologies Used
* Apollo GraphQl
* Express.js
* Express Validator
* Next.js
* Passport.js
* Passport-local-mongoose
* Passport-github
## Contents
* [Project Structure](#project-structure)
* [Mutations](#mutations)
* [Schema](#schema)
* [Resolvers](#resolvers)
* [Models](#models)
* [Deploy](#deploy)
### Project Structure
```md
├── 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
#### Schema
Here we have one `User`'s type with three fields (email, fullname and password), one `Query` type with a profile field just to keep GraphQL's mouth shut about having a Query type defined. We have two `Mutation` types (login, and signup).
```ts
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
}
```
#### Resolvers
The resolvers we care about here are `createUser` and `login`. They both take in `email` and `password` as arguments with `createUser` taking an extra `fullname` argument.
```js
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')
}
})
})
}
}
```
### Models
Oops! We have only one model (User). It accepts email, validates the email with `express-validator`. Then we have a plugin to tell `passport-local-mongoose` to use our email field as the default `usernameField`.
```js
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'
}
})
```
### Deploy
[](https://deploy.now.sh/?repo=https://github.com/ooade/next-apollo-auth)
### License
MIT