Forem: Segun98

Simple Password Reset Flow using Nodejs, Expressjs, SendGrid and uuid

Segun98 — Mon, 01 Feb 2021 18:55:41 +0000

I implemented a password reset flow in a personal project and I thought I should write about it. This article assumes you can set up an express server, query a database, create routes... and all that fun stuff.

Packages we'd use:

SendGrid (for emails) - npm i @sendgrid/mail
Knex (A Database Query Builder. Of course you can use any) - npm i pg knex
uuid (to generate unique ids) - npm i uuid
bcrypt (to hash passwords) - npm i bcryptjs

Go ahead and install them!

First I'd explain the process:

Step 1:

Create a 'password_reset' table in your database with columns "id", "email".

Step 2:

Users submit their email requesting for a password change, we check if this email exists in our "users" table (existing users table). If the user exists, we insert a unique id and the submitted email into the "password_reset" table and send them an email with a link containing that id.

Step 3:

We use the id in the link to verify the user and update with the newly entered password

Easy stuff! Now let's write some code.

#### Step 2

//imports

const knex = require("--your db setup--")
//sendgrid for emails
const sgMail = require('@sendgrid/mail');
//uuid
const {
    v4: uuid
} = require("uuid")

//add your api key. Please sign up on https://sendgrid.com to get yours
sgMail.setApiKey(--Your API key--);

router.post("/password_reset", async (req, res)=> {
         //email user submitted

        const {
            email
        } = req.body

        try {
            //check if user exists

            const user = await knex("users").select("email").where({
                email
            })

            if (user.length > 0) {
            //generate a unique id

                let id = uuid()

            //insert into the "password_reset" table

                await knex("password_reset").insert([{
                    id,
                    email: user[0].email
                }])

            //email content sent with SendGrid. The unique id is sent in the email as a link

                const content = {
                    to: email,
                    from: "support@me.com",
                    subject: "Password Recovery",
                    html: `<body>
                    <p>Click to set a new password : <a href="yoururl/password/reset/${id}">Reset password</a></p>

                    </body>`
                }
                await sgMail.send(content)
                return res.send("Please check your email for the next step")
            }

          //if email doesn't exist

            return res.status(404).send("email does not exist in our records")
        } catch (error) {
            res.send(error.message)
        })

Next step is to verify the user by checking the "password_reset" table with the id passed in the email url.

#### Step 3A

  router.get("/verify_email/:id", async (req, res) => {
       //pass in the id as a parameter

        const {
            id
        } = req.params

        try {
           //query for the email with the provided id

            const email = await knex("password_reset").select("email").where({
                id
            })
           //send back the email

           return res.send(email[0])

        } catch (error) {
            res.status(404).send(error.message)
        }
}
)

Finally We update the user's password in the "users" table, and clear the record in the "password_reset" table to ensure the link sent in the email in "Step 2" is useless.

##### Step 3B:

router.post("/change_password", async(req,res)=>{
        const {
            email,
            id,
            newpassword
        } = req.body

        try {
            //final check if user exists in "password_reset" table

            const user = await knex("password_reset").select("email").where({
                email
            })
            if (user.length === 0) {
                return res.status(404).send("an error occured")
            }

            //hash new password

            const salt = await bcrypt.genSalt(10)
            const hashedpassword = await bcrypt.hash(newpassword, salt)

           //update the users table!

            await knex('users')
                .where({
                    email
                })
                .update({
                    password: hashedpassword
                })

            //clear the record in "password_reset" table for security

            await knex('password_reset')
                .where({
                    id
                })
                .del()

            return res.send("password successfully changed!")
        } catch (error) {
            res.send(error.message)
        }
})

The End!

Note:

There are probably other ways to do this, this is what I came up with.

Password reset flow with Nodejs, Expressjs and SendGrid Email

Segun98 — Fri, 22 Jan 2021 11:17:43 +0000

Packages we'd use:

SendGrid (for emails) - npm i @sendgrid/mail
Knex (A Database Query Builder. Of course you can use any) - npm i pg knex
uuid (to generate unique ids) - npm i uuid
bcrypt (to hash passwords) - npm i bcryptjs

Go ahead and install them!

First I'd explain the process:

Step 1:

Create a 'password_reset' table in your database with columns "id", "email".

Step 2:

Users submit their email requesting for a password change, we check if this email exists in our "users" table (existing users table). If the user exists, we insert a unique id and the submitted email into the "password_reset" table and send them an email with a link containing that id.

Step 3:

We use the id in the link to verify the user and update with the newly entered password

Easy stuff! Now let's write some code.

#### Step 2

//imports

const knex = require("--your db setup--")
//sendgrid for emails
const sgMail = require('@sendgrid/mail');
//uuid
const {
    v4: uuid
} = require("uuid")

//add your api key. Please sign up on https://sendgrid.com to get yours
sgMail.setApiKey(--Your API key--);

router.post("/password_reset", async (req, res)=> {
         //email user submitted

        const {
            email
        } = req.body

        try {
            //check if user exists

            const user = await knex("users").select("email").where({
                email
            })

            if (user.length > 0) {
            //generate a unique id

                let id = uuid()

            //insert into the "password_reset" table

                await knex("password_reset").insert([{
                    id,
                    email: user[0].email
                }])

            //email content sent with SendGrid. The unique id is sent in the email as a link

                const content = {
                    to: email,
                    from: "support@me.com",
                    subject: "Password Recovery",
                    html: `<body>
                    <p>Click to set a new password : <a href="yoururl/password/reset/${id}">Reset password</a></p>

                    </body>`
                }
                await sgMail.send(content)
                return res.send("Please check your email for the next step")
            }

          //if email doesn't exist

            return res.status(404).send("email does not exist in our records")
        } catch (error) {
            res.send(error.message)
        })

Next step is to verify the user by checking the "password_reset" table with the id passed in the email url.

#### Step 3A

  router.get("/verify_email/:id", async (req, res) => {
       //pass in the id as a parameter

        const {
            id
        } = req.params

        try {
           //query for the email with the provided id

            const email = await knex("password_reset").select("email").where({
                id
            })
           //send back the email

           return res.send(email[0])

        } catch (error) {
            res.status(404).send(error.message)
        }
}
)

Finally We update the user's password in the "users" table, and clear the record in the "password_reset" table to ensure the link sent in the email in "Step 2" is useless.

##### Step 3B:

router.post("/change_password", async(req,res)=>{
        const {
            email,
            id,
            newpassword
        } = req.body

        try {
            //final check if user exists in "password_reset" table

            const user = await knex("password_reset").select("email").where({
                email
            })
            if (user.length === 0) {
                return res.status(404).send("an error occured")
            }

            //hash new password

            const salt = await bcrypt.genSalt(10)
            const hashedpassword = await bcrypt.hash(newpassword, salt)

           //update the users table!

            await knex('users')
                .where({
                    email
                })
                .update({
                    password: hashedpassword
                })

            //clear the record in "password_reset" table for security

            await knex('password_reset')
                .where({
                    id
                })
                .del()

            return res.send("password successfully changed!")
        } catch (error) {
            res.send(error.message)
        }
})

The End!

Note:

There are probably other ways to do this, this is what I came up with.

Front End Web Development Today - A Guide For Absolute Beginners

Segun98 — Tue, 01 Sep 2020 01:04:57 +0000

Front end Web development is a huge deal today, as websites have become more complex. Developers have to be concerned about Accessibility, User experience and User Interface Design, Performance, SEO and so on.

This is a straight forward guide for absolute beginners who may be confused with what to learn or making a choice of what technology to use.

HTML, CSS and Vanilla Javascript are what every front end developer should start with, before thinking about the shiny frameworks. HTML defines the structure of a web page, CSS adds styling and Javascript adds functionality.

Note that the following are my opinion, they are what I think wouldn't be overwhelming for a beginner.

A few important things to learn in:

HTML

• Syntax

• Basic Tags

• Forms

• SEO

• Best Practices

CSS

• Syntax

• Positioning

• Box Model

• Flex and Grid

• Animation

• Responsive Design

• Media Queries

• Best Practices

Vanilla Javascript

• DOM manipulation

• Syntax

• Functions

• Arrays and Objects

• Loops

Learning technologies is by building with them, watching tutorials alone can be quite deceptive.

Some beginner friendly channels on Youtube : Dev Ed, Traversy Media and NetNinja.

After a few projects highlighting all these technologies, you can proceed to picking a framework.

Project Ideas

• Clone websites of your choice

• Todolist

• A small game

There are three popular frameworks/libraries for front end web development and you can pick any of them after you do your research: Angular, Reactjs and Vuejs. On the websites of these frameworks, there are guides on what to understand in Javascript before learning them. Do well to follow their advice.

Happy Learning!

Query GraphQL API In Nextjs Data Fetching Methods - GetServerSideProps

Segun98 — Fri, 28 Aug 2020 00:12:15 +0000

The logical tool to use when I set out to build this website - Locallog was Nextjs, I needed SEO amongst other things that a single page app did not provide and also, Nextjs is awesome.

I used an Express server with MongoDB on the backend. It was the first time I was using a GraphQL API. The popular tool I saw everywhere to query a GraphQL API on the front end was Apollo so I went straight to Nextjs’s Github page and looked up the Apollo example, I copied the entire code without checking the README. Querying the API worked, but I ran into issues because I didn’t query inside of Nextjs’s data fetching methods. If you are not familiar with them, check out the Docs.

My data wasn’t fetching at request time so it did not populate the head tag and I was getting a blank screen at some point. The whole idea of using Nextjs for SEO was defeated. I raised an issue on Github and was told to use a lighter library. I consulted Google and found a library: GraphQL Request, it is a Minimal GraphQL client supporting Node and browsers for scripts or simple apps

I will be showing you how to query and make mutations using variables. We will be building a Todo app.

First, install the library on npm (you can also use Yarn) and import ‘request’ on your page like so:

Npm i ‘graphql-request’ // in terminal  


import { request } from "graphql-request"; // in your page


We will be constructing our query like so:  



//request query
  const TODOS = ` {  
    todos{  
     id  
     name  
     completed  
     date  
    }  
   }`;

Here, we query for all Todo items. First we created a variable and assigned it to our request query.

Now we would use it inside of Nextjs’ getServerSideProps, you could use getStaticProps or combine getStaticProps with getStaticPaths, read the docs on Nextjs.org.

export async function getServerSideProps() {  
    //'request' from ‘graphql-request’ library 
    const res = await request(‘/api/graphiql’, TODOS);  
    const data = res.todos;  

    return {  
     props: {  
      data //Pass Data in props  
      },  
     };  
    }  
    //pass data into component  
    function Index({ data }) {  
     return (  
        <div> 
      ...use data here  
        {data.id}  
        </div>  
     )  
    };

It’s that simple, we passed in two arguments in request(‘/api/graphql’,TODOS). ‘/api/graphiql’ is our request endpoint and ‘TODOS’ is the variable assigned to our query.

Full code:  


import { request } from"graphql-request";

const TODOS = `{  
 todos{  
    id  
    name  
    completed  
    date  
  }  
 }  
`;  

export async function getServerSideProps(){  
 const res = await request(‘/api/graphql’,TODOS);  
 const data = res.todos;  

 return {  
 props: {  
   data
  },  
 };  
}  

function Index({ data }) {  
 return (  
      <div>  
      {data.id}  
      </div>  
 )  
};

Now Let's query for a single Todo Item

const TODO = `
query todo($id: String!) { // First line  
 todo(id: $id){ // Second line  
    name  
    date  
  }  
 }  
`;

First Line:“$id”here is a variable and it is a GraphQL “STRING” type (click Here to learn about all GraphQL types), the exclamation mark stands for ‘Non Null’

Second Line: We are then assigning the variable to the argument we would pass into our request.

Notice we only returned ‘name’ and ‘date’ from our query, excluding ’completed’. Graphql helps prevent over-fetching.

Now let’s use it in graphql-request.

Create a page in pages folder like so: ‘/pages/[id].js’, this allows us pass in our parameter in the request. If you are unfamiliar with this check out Docs .



  export async function getServerSideProps({params }) { //Line 1 
    const variables = { // Line 2  
     id: params.id,  
     };  

    const res = await request(‘/api/graphiql’, TODO, variables); // Line 3  
     const data = res.todo;  
      return {  
      props: {  
        data  
      },  
     };  
    }

Line 1: we pass in ‘params’ for access to our url parameter

Line 2: we created a ‘variables’ object to pass in the expected ‘id’ variable in our request.

Line 3: we have a third parameter in our request where we pass in the variables.

Now we can display a single todo item in our page.


Full code:  

 const TODO = `  
  query todo($id:String!) { // First line  
   todo(id:$id) { // Second line  
        name  
        date  
   }  
   }  
  `
  export async function getServerSideProps({params }) {//Line 1  
   const variables = { // Line 2  
    id: params.id 
   };  

   const res = await request(‘/api/graphiql’, TODO, variables); // Line 3  
   const data = res.todo;  
   return {  
   props: {  
      data  
    },  
   };  
  }  

  function TodoPage({data}){  
   return(  
   … 
   )  
  };

We will now be making a mutation. We do not need to use a data fetching method because we are not fetching data.


  const ADD_TODO = `  
   mutation addTodo( //Line One  
          $name:String!  
          $date:String  
          $completed:Boolean!)
           {  
        addPost(  
          name: $name  
          date:$date  
          completed:$completed)
           {  
          name //Line Two  
      }  
    } `

Line One: notice the ‘mutation’ keyword

Line Two: we can also return data from a mutation

Using our mutation query in the component:

  function  Component () {  
    const[name, setName ] = React.useState("") //input state  

    function addTodo(e) { //submit function  
     e.preventDefault() 

    const variables = {  
          name, //from input state  
          date: new Date(),  
          completed: false  
     };

     try{  
     const res = await request("api/graphql", ADD_TODO, variables);   
     console.log(res.data)  
    } catch(err) {  
     console.log(err.message)  
    }  
  }   

    return (  
      <div>  
      …  
      </div>  
    )  
  };

Done! I am glad you completed this. This is my first technical post, please excuse the mistakes or better still leave a comment.