Creating a Reddit Clone Using React and GraphQL -12

Photo by Pixabay from Pexels

This blog post originally posted on my blog site and you can find it here.

As I said in an earlier post we have to manage 2 scenarios here.
1. Refresh the cache for forgot password
2. Error handle for token errors.

Add below code lines to handle the token errors. We are using states here.

const [tokenError, setTokenError]  = useState('');

Then we are adding the below code to check that token error exist. If so we are. adding it to state.

Let’s display this error.

{tokenError ? <Box color="red">{tokenError}</Box> : null}

Add this moment if you try, you will get 404 error. The issue in here, that we didn't wrap this with with withUrqlClient . Let’s cover the component with it.

export default withUrqlClient(createUrqlClient)(ChangePassword);

Now, we need to delete the token from the back-end once we use this token. Let’s do that next.

Now if you try to use the token 2nd time to change the password, you will get the token expired error. Cool. All working fine now.

Okay, now we only left here, if the token expired your need to get a new token. Let’s add that. First, we are adding a link to get a new token page.

Once you click on the link it will bring you to forgot-password page. Let’s quickly add that page.

This also needs to add to Login page.

As the last for this forgot-passward page, we need the user to insert an email address. Let’s copy from Login page and add it in here. Also we need to create a mutation for forgot-password .This will only return a boolean value.

mutation ForgotPassword($email: String!) {
    forgotPassword(email: $email)
}

In forgot-password.tsx page, we use state to set a success message.

const [complete, setComplete] = userState(false);

Here is the full code for forgot-password.tsx file.

At this point, we have done almost everything with user management and authentication tasks of this application. From the next blog post, let’s work on adding posts to the Reddit clone.

Thanks for reading this. If you have anything to ask regarding this please leave a comment here. Also, I wrote this according to my understanding. So if any point is wrong, don’t hesitate to correct me. I really appreciate you.
That’s for today friends. See you soon. Thank you.

References:

This article series based on the Ben Award — Fullstack React GraphQL TypeScript Tutorial. This is an amazing tutorial and I highly recommend you to check that out.