Google Sign Up/Log In Authentication Strategies

Currently our team is working implementing Google Sign Up and Log In for the client-side React application for our Teacher Supply Donation web app. During the implementation, I discovered that we have to take into account the method we’re implementing with. At first, the authenticating via Google was implemented using the passport-google-oauth20 package which basically had the Express server receive the request from the client containing the user’s Google Id, if the id already existed in database we would simply return the user data, otherwise we create a new user in the database and then return the user data. The data was sent back via a callback route which required a redirect. This scenario is best for server-side rendering. This is where we realized we had an issue with our initial implementation since our project wants to redirect the user using Client-Side routing based on authorization.

After some research, I discovered the @react-oauth/google NPM package. This package allows the developer to create a Google Login component and handle authenticating the user with Google on the client side. Once Google responds that the user is authenticated as a Google user, we can then send the access token to our Express server to exchange for a JWT token. With that JWT token, the user will have authorization to our protected routes in the React application.

When dealing with Authentication and Authorization strategies, first decide whether the use case is for Server-Side rendering or Client-Side routing.

1 Sprint Down, 3 More To Go!

Today marks the end of our first Sprint from Oct 10 – Oct 23 for the CS467 Online Capstone Project. Our team will be starting Sprint B (Oct 24 – Nov 6) starting tomorrow where our Sprint Goal is to complete implementation of the Donations API and Teacher Dashboard and Donation UI components.

These past two weeks were a great learning experience. Once we got into the groove of things, we were well on our way completing issues on Jira. Out of all the tasks we needed to complete, creating a test suite was the most difficult. Initially we tried using Jest as our testing framework for the back-end services since that is what the React app uses as their testing suite. However, we ran into an issue where Jest did not play nice with our ES6 modules implementation of our back-end services. I decided to try Mocha instead along with Chai as the assertion library and Supertest for testing of endpoints. The implementation was much easier and I was able to get passing test cases for the Teacher database model and its integration with the API endpoints. Below is an example where I tested the POST /auth/signup endpoint.

The first test case is for when a user successfully signs up for an account, the test expects that the POST route responds with a token property included in the response body. The second test case expects that the Http Status Code 400 is returned since email is a required property when signing up a new user.

Before these tests are ran, the testing framework needs to connect to the MongoDB database and clear out the database after the testing suite is completed so that we don’t have unwanted data in there after the tests. A setupDb function was created to do just this before the test suites.

There is much to learn and implement but so far our team is off to a great start. During this sprint, I’ll be focusing on expanding the integration and unit tests for critical scenarios and API endpoints in addition to implementing the remaining entity models and controller code.

Capstone Project Kickoff!

Today marks the beginning of the first Sprint for my CS467 Online Capstone project with my teammates. I’m in a group with two other students who I have worked with before in the Software Engineering II course. Having already been in a group with each other is great since we know what our strengths and weaknesses are. Everyone is responsive and responsible which is very fortunate since I have been in bad groups, finishing up my final term at OSU with this amazing group will make the journey to graduation pleasant.

For our Online Capstone project, we chose to develop a Teacher Supply Donation Web Application. This was an idea proposed by one of my teammates who has been working in education. Here is a little background regarding the idea and the purpose of the Web App as stated in our Project Plan:

In the US K-12 education system, school budgets are often insufficient to cover classroom supplies that teachers need to conduct the activities that would most facilitate student learning. As a result, many teachers compensate by buying supplies themselves or seeking donations from students and their families. To help make this donation process convenient and efficient for both teachers and students, our team will develop a full stack web application that allows teachers to register supply request lists and allows students to make donation commitments. It also allows both teacher and student users to monitor and update donation activity. We feel this is a significant contribution in that many similar classroom donation websites (e.g. DonorsChoose, AdoptAClassroom) are focused on monetary contributions and require that teachers invest much time in the application process. In contrast, our concept offers a simple tool for teachers so that they are able to efficiently request classroom supplies with much less time and effort on the part of the teacher.

We’ll be developing the project throughout four, 2-week sprints. We have decided on the MERN stack since that seems to be the tech stack where everyone has the most experience developing with.

As shown in the system design diagram above, there will be two types of users. A Teacher will be able to log into the application to create a list of supplies that they would like to have students donate. Students will be directed to a Teacher’s donation list via an email link or by entering a unique identifier to take them to the correct page on the website, where they can then submit what items they want to donate from the list curated by the Teacher.

For the next 2 weeks of our first sprint, we’ll mainly be focusing on creating the data models for MongoDB, setting up our environment, prototyping the UI and design of the web application, and implementing the landing page and user login/authentication. I’m extremely excited to get started working on the project and look forward to seeing what the final outcome will be. Stay tuned for more updates in the following weeks!

Hello World and My Journey with OSU

Hello world!  I’m Sean Park, a Post-Bacc Computer Science student at Oregon State University.  It is crazy to think that I am already at my last term for the program and graduating in December.  I took a leap of faith two years ago by applying to the program with the hopes of achieving my dream and changing careers to software engineering.

The decision to follow through was both exciting and nerve-racking but after two years of working full-time while pursuing a second bachelors has been well worth it.  The beginning the really tough, I had to acclimate to a new schedule and workload but after a term I got into the groove of things.  If you have the capacity, I recommend being an Undergraduate Learning Assistant (ULA) for a course to strengthen your resume and communication skills.  I strongly believe that being a ULA for CS290 since September 2021 has helped me not only communicate technical terms and concepts to my peers but also gave me an advantage during interviews.

I was fortunate in being able to secure internships during both summers of 2021 and 2022.  If possible, I highly recommend doing internships to gain work experience which will help with securing a job after the program.  I am thrilled to say that I was given a return offer to full-time after the end of my Summer 2022 internship.  Both internships were a great learning experience where I not only applied what I learned in school but also learned new technologies such as Amazon Web Services (AWS), .NET framework, and C# development.

For the next few weeks, I’ll be blogging the remainder of my journey at OSU and my experience with Capstone.  I can’t wait to work on a new exciting project with my team and see what other students will be working on.  To all the other students graduating this term, congratulations on making it this far and let’s finish strong!

If anyone would like to connect please hit me up on LinkedIn!