ooade / Next Apollo Auth
Authentication Boilerplate with Next.js and Apollo GraphQL
Stars: β 159
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Next Apollo Auth
Pizzaql
π Modern OSS Order Management System for Pizza Restaurants
Stars: β 631 (+296.86%)
Mutual labels: graphql, apollo, nextjs, authentication
Next Advanced Apollo Starter
Advanced, but minimalistic Next.js pre-configured starter with focus on DX
Stars: β 131 (-17.61%)
Mutual labels: graphql, apollo, nextjs, authentication
Next Apollo Example
Next & Apollo Example
Stars: β 413 (+159.75%)
Mutual labels: graphql, apollo, nextjs
Hackernews React Graphql
Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
Stars: β 4,242 (+2567.92%)
Mutual labels: graphql, apollo, nextjs
Meteor Apollo Accounts
Meteor accounts in GraphQL
Stars: β 145 (-8.81%)
Mutual labels: graphql, apollo, authentication
Babel Plugin Import Graphql
Enables import syntax for .graphql and .gql files
Stars: β 284 (+78.62%)
Mutual labels: graphql, apollo, nextjs
Apollo Upload Examples
A full stack demo of file uploads via GraphQL mutations using Apollo Server and apollo-upload-client.
Stars: β 358 (+125.16%)
Mutual labels: graphql, apollo, nextjs
Example Storefront
Example Storefront is Reaction Commerceβs headless ecommerce storefront - Next.js, GraphQL, React. Built using Apollo Client and the commerce-focused React UI components provided in the Storefront Component Library (reactioncommerce/reaction-component-library). It connects with Reaction backend with the GraphQL API.
Stars: β 471 (+196.23%)
Mutual labels: graphql, apollo, nextjs
Naperg
Fullstack Boilerplate GraphQL. Made with React & Prisma + authentication & roles
Stars: β 661 (+315.72%)
Mutual labels: apollo, expressjs, authentication
Next Graphql Blog
π A Blog including a server and a client. Server is built with Node, Express & a customized GraphQL-yoga server. Client is built with React, Next js & Apollo client.
Stars: β 152 (-4.4%)
Mutual labels: graphql, apollo, nextjs
Next Ecommerce
β‘οΈ Quantum Ecommerce. Made with Next.js | GraphQL | Apollo Server | Apollo Client | SSR
Stars: β 186 (+16.98%)
Mutual labels: graphql, apollo, nextjs
Next React Graphql Apollo Hooks
React, Apollo, Next.js, GraphQL, Node.js, TypeScript high performance boilerplate with React hooks GraphQL implementation and automatic static type generation
Stars: β 186 (+16.98%)
Mutual labels: graphql, apollo, nextjs
Ran
β‘ RAN! React . GraphQL . Next.js Toolkit β‘ - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands and more...
Stars: β 2,128 (+1238.36%)
Mutual labels: graphql, apollo, nextjs
Apollo Server Vercel
β« Production-ready Node.js GraphQL server for Vercel Serverless Functions
Stars: β 69 (-56.6%)
Mutual labels: graphql, apollo, nextjs
Next React Graphql Apollo boostrap
React + GraphQL + Next.js project architecture that I play with right now
Stars: β 59 (-62.89%)
Mutual labels: graphql, apollo, nextjs
Nextjs Headless Wordpress
π₯ Nextjs Headless WordPress
Stars: β 110 (-30.82%)
Mutual labels: graphql, nextjs, authentication
Giraffeql
π¦ Developer tool to visualize relational databases and export schemas for GraphQL API's.
Stars: β 128 (-19.5%)
Mutual labels: graphql, nextjs
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
βββ 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).
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.
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
.
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
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].