Benji Riethmeier
Icon

Courtside Devlog 4: Oops, Forgot My Password

2/6/2023 | 4 min read

Hello, my name is Benji Riethmeier, and I am a full stack engineer for the Courtside project, which is being done for my Computer Science Senior Project.

What is Courtside

Courtside is a mobile app that allows users to fully customize their sports experience by following the exact information they want to see. Users can follow their favorite sports, teams, players, and even individual stats.

The app is built with React Native (using the Expo platform) and Typescript on the frontend. On the backend, the Flask framework serves as our API and MongoDB is used for our database.

What is Courtside (Currently)

Users can follow their favorite sports Basketball, teams, players, and even individual stats. Users can log into the app and have their data retained on the server.

This Week

Tasks

This week’s goal was to continue fleshing out the user authentication system. The main focus this week was on allowing users to change their password if they forgot it. Since this involves interactions outside the app, this also required me to create web pages that would be served to the user while the were going through critical flows outside the app.

Oops, Forgot My Password

Now, on the login screen, users have the option to go to a separate page where they can email themselves allowing them to change their password.

Screen in the app to send password reset email to self

Screen in the app to send password reset email to self

The email sent to the user. The button links to the reset form

The email sent to the user. The button links to the reset form

This email has a link that the user can follow to an HTML page in their web browser where they can type in a new password.

The reset form, which is opened in the user's web browser.

The reset form, which is opened in the user's web browser.

If the reset is successful, another screen appears telling the user to return to the app and log in.

The user is redirected back tot he app after their password is updated.

The user is redirected back tot he app after their password is updated.

Two new routes had to be created to facilitate this user flow: /users/forgotPassword which sends the email to the user and /users/forgotPassword/<token>. A GET request to the second route returns the page to reset the password (if the token is valid) and a POST request to the second route updates the password.

Web Presence

Both the email verification flow (from last week ) and this week’s forget password flow require the user to go outside the app to complete critical actions for security reasons. This required me to write some HTML pages for the app that can handle these flows as well as emails to be sent to the users which are written in HTML as well.

These pages are purely functional right now and will have to be thoroughly styled later.

Get Started Page

Finally, I created a new Getting Started page for the app, which has an image carousel listing the main features of the app. In the future, this will be the starting page for a tour of the app, which would demonstrate the major features of the app to the users.

I made sure to use DALLE-2 to generate sports images in Facebook’s Alegria style for that big tech aesthetic.

Problems

Once again, I was not able to tackle the tour of the app that has been a major task for quite a while. This week, I once again ran out of time and did not get much chance to communicate and work with the team due to a system of snowy weather that came through most of this week.

This upcoming week, I’m hoping to have a better chance to touch base with the team and fully grind out this tutorial feature.

Next Week

As mentioned above, this week I want to focus entirely on implementing a tour of the app. This feature was given high priority by our stakeholders (the Senior Software class instructors) and we need to deliver.

I mentioned a few different ways we could go about implementing this feature in [/blog/posts/courtside-devlog-3](last’s week devlog).