Creating a Reddit Clone Using React and GraphQL - 12
Tags: react, typescript, graphql, redditclone
Published: 2021-03-16 17:48:07

### This blog post originally posted on my blog site and you can find it [here](https://www.rasikag.com/posts/creating-a-reddit-clone-using-react-and-graphql-12).

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.

```javascript
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.

```javascript
// take out toErrorMap first
const errorMap = toErrorMap(response.data.changePassword.errors);
if ("token" in errorMap) {
  // this is because we defined filed as token in user.ts in backend
  setTokenError(errorMap.token);
}
```

Let’s display this error.

```javascript
{
  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 `withUrqlClient`. Let’s cover the component with it.

```javascript
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.

```javascript
// in resolvers/user.ts file
// first get the key out
const key = FORGET_PASSWORD_PREFIX + token;
const userId = await redis.get(key);
// then delete the key
await redis.del(key);
req.session.userId = user.id;
```

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.

```javascript
// update code to below code block in [token].tsx file.
{
  tokenError ? (
    <Box>
      <Box color="red">{tokenError}</Box>
      <NextLink href="/forgot-password">
        <Link>Click here to get a new token.</Link>
      </NextLink>
    </Box>
  ) : null;
}
```

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

```javascript
import React from "react";
const ForgotPassword: React.FC<{}> = ({}) => {
  return <div>Forgot Password</div>;
};
export default ForgotPassword;
```

This also needs to add to `Login` page.

```javascript
// under to inputfield add this code
<Flex mt={2}>
  <NextLink href="/forgot-password">
    <Link ml="auto">forgot password?</Link>
  </NextLink>
</Flex>
```

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

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

```

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

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

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

```javascript
const [complete, setComplete] = userState(false);
const [, forgotPassword] = useForgotPasswordMutation();
return (
  <Wrapper variant="small">
    <Formik
      initialValues={{ email: "" }}
      onSubmit={async (values) => {
        await forgotPassword(values);
        setComplete(true);
      }}
    >
      {({ isSubmitting }) =>
        complete ? (
          <Box>we sent a password reset link to your email. Please check.</Box>
        ) : (
          <Form>
            <InputField
              name="email"
              placeholder="email"
              label="Email"
              type="email"
            />

            <Button
              isLoading={isSubmitting}
              mt={4}
              type="submit"
              colorScheme="teal"
            >
              Forgot Password
            </Button>
          </Form>
        )
      }
    </Formik>
  </Wrapper>
);
```

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](https://www.youtube.com/watch?v=I6ypD7qv3Z8). This is an amazing tutorial and I highly recommend you to check that out.

Main image [credit](https://www.pexels.com/photo/green-mountains-and-flowing-river-206660/)