Starting to contribute
This week on the starchart project we set out what we were going to commit to completing for the 0.1 Milestone. This is now concrete coding work we are talking about, along with continuously reading documentation and now also peer-reviewing PRs and helping one another get setup.
In the very beginning of the week I had some issues getting the starchart project running on my machine and the team got together on a call after our first scheduled meeting and helped me out. I learned that I had to build before running and that my mysql-data folder had some issues so it had to be deleted and the generated again.
I had problems again later, eventually after bouncing ideas back and forth with TD on how to solve it it turns out deleting my node modules and re installing worked (just npm installing without deleting did not). Still not sure why but in any case, I was able to work with Star Chart and I got to doing the small part that I had set out to.
Initial Auth
The issue I had commited to was to create a login button that would authenticate as the single user that is seeded into the dev database, I then also created a log out button that would destroy the session.
Initially I had thought that I would have to write the session.server.ts file and make my own createCookieSession methods to work with, docs for which can be found here. This did not turn out to be the case because apparently the blues stack already has a really great session.server.ts file with some really nice methods such as some require methods that will automatically throw redirects to login routes if conditions aren't met and things of that nature which I made use of.
There is also a longer example that takes you through the creation of a joke application that has helped me work with remix here.
The logic that I use comes from these docs.
What I did was I added 2 files login.tsx and logout.tsx under the routes folder. The login.tsx has an action that occurs upon the press of the login button that will use the prewritten createUserSession() method with the seeded users username and redirect to the Index page.
I then edited the index page to include a loader that would require the authenticated user, there was yet again a really helpful pre-written function to use from session.server.ts requireUsername() that checks the request from Loader Arguments for the username and if it does not find it it redirects to login. If it does find it it returns the user's username to the Index component to be able to make use of it when it renders the HTML.
I then added a button to the Index HTML that would use the action of the new logout route when pressed.
The logout route has the action I just mentioned which uses yet another pre-written function that is called logout() which destroys the session and it also has a loader just in case someone accidentally navigates to it. The loader simply redirects the client to the base Index route.
PRs and Reviews
Here are the 2 PRs that I made this week and the comments and changes associated with them.
Login and Logout
Changing User Model after Prisma Schema change
The second one was a small one to change the user model and seed to match the changes to the Prisma Schema whereby name was split into first and last names.
I also did a few approvals on other students PRs. I really did not know how to improve them, they seemed good to me and that's what I wrote. I hate to not be able to contribute more but I also hate to see PRs that look really well done sitting there blocked with only one review.
Thanks for reading. Onto reading more about SAML.
Top comments (0)