• Design
  • Shotty
  • Blog
  • Reading
  • Photos
Menu

Jacob Ruiz

Product Designer
  • Design
  • Shotty
  • Blog
  • Reading
  • Photos
graphql-notes@2x.png

Password Reset in GraphQL

June 10, 2019

I’m sharing my working notes on here to force myself to articulate my understanding as I build a GraphQL project. This isn’t a tutorial, sorry if you came here looking for one.

How it works: 2 key resolvers

requestReset

  • Arguments

    • email

  • Finds user with that email in db

  • Creates random bytes as resetToken

  • Creates a date as resetTokenExpiry

  • Adds resetToken and resetTokenExpiry to the user in the db

  • Sends an email to the user that has the token

resetPassword

  • Arguments:

    • email

    • password

    • confirmPassword

    • resetToken

  • Find the the user in the db with that resetToken

  • Make sure resetTokenExpiry date hasn’t expired

  • Hash the new password

  • Update the user in the db

    • password : The new hashed password

    • resetToken : null

    • resetTokenExpiry : null

  • Return the user

Here’s a look at the code for each:

How to test the Password Reset flow in GraphQL Playground

1. Run the requestReset mutation:

mutation {
  requestReset(email: "jacob@gmail.com")
}

2. Check MailTrap (my dev test email inbox) or the database (I’m using postgres) to get the resetToken:

Example commands for postgres in Terminal:

psql
\c graindev
SELECT * FROM users;

3. Run the resetPassword mutation in GraphQL Playground:

mutation {
  resetPassword(
    email: "user@test.com"
    password: "password"
    confirmPassword: "password"
    resetToken: "0ad35f89a0173f474dc87d6b1323e48fadecb1c4"
  ) {
    id
    email
    username
  }
}

If all went well, it should return the user.

In Code
← Why Use Custom Date Scalar Types in GraphQL?Shotty Dark Mode Is Out Today! →
shotty-skinny2x.jpg

Shotty - Faster Access To Your Screenshots on Mac

Shotty is an award-winning Mac app I created to give you instant access to all your recent screenshots, right from the menu bar. You can even add annotations on-the-fly. Stop wasting time digging through Finder for your screenshots. I promise it’ll change your workflow forever (just read the App Store reviews!).



Most popular

information-architecture

Information Architecture: The Most Important Part of Design You're Probably Overlooking

Follow @JacobRuizDesign