Tracing the Redwood Blog Authentication code

[adriatic]

---

Introduction

This first article explains the process of stepping through code using the debugger - not to chase a bug, but to get familiar with the debugger tool used to verify the correctness of a process flow.

Initially we will use the material from the Redwood Tutorial as the context, the cookbook articles are derived from. Limiting ourselves to this context is likely not sufficiently ambitious, but it will be a good start. Since authentication issues are famously fickle (quote from the authentication section of the Redwood Tutorial), we believe that presenting a detailed examination of the authentication process by stepping through the code using a debugger - either the Chrome debugger which is a part of DevTools, or VSCode debugger

The mechanics of using the either of two debuggers that will appear in this article will be presented later

[adriatic]

Development Environment Setup

1. Setup Redwood Blog application (prepare the debugging target)

using the information from what's Next Redwood Tutorial section.

To explain the use of debugging tools in a debugging task, we need an application to be debugged. Reducing the application to a code snippet is not nearly as good approach, since the whole application's context plays a significant role.

Rather than creating such application from scratch, sufficiently complex to illustrate debugging practices, the well known application that was built in the course of the Redwood Tutorial will be used instead. This application (Redwood Blog) exists in this repository. Make a local clone and run it, using the commands defined in the section using the example repo of the Redwood Tutorial. Since the line the line yarn rw g secret is missing there, these commands are repeated here for your convenience.

git clone https://github.com/redwoodjs/redwood-tutorial.git
cd redwoodblog
yarn rw prisma migrate dev
yarn rw prisma db seed
yarn rw g secret
yarn rw dev

resulting with the front end of the Redwood Blog application running in the browser

Image 1 - Redwood Blog app running locally

---

2. Setup the DevTool debugger

using the article debugging with chrome

Having the Redwood Blog app running in the browser, invoke the DevTools from the browser menu with clicks 1, 2 and 3

Image 2 - invoking DevTools

Click on the menu item 3, the debugger will launch next to application running in the browser resulting with:

Image 3 - debugee and the debugger running together

The devtools docking (dock on the right in the above image) can be set according to the Image 4 (below)

Image 4 - setting the devtools docking preference

Note: the browser panel with Redwood Blog is placed next to the devtools panel only as a convenience (so you can restart the application for example). Having just a single monitor, you can do everything on the devtools panel alone.

---

3. Setup Visual Studio Code debugger

assuming that the Visual Studio Code is already installed (if not, visit the Visual Studio Code home page and observe that the you will be prompted with the download button that preselects your development platform.

Download and install it, and then continue with the ???? paragraph)

... more to come here ...

[adriatic]

Planing the article

This section is created for the benefit of the people providing the feedback before the actual article gets written as well as the guideline for the author. This approach provides the clarity for the team to provide the feedback feedback needed for writing a well designed Cookbook entry.

[adriatic]

saving the space

[adriatic]

Tracing the authentication code with DevTools

Waiting for the discussion and decision on Planing the article.

[adriatic]

Tracing the authentication code with VSCode

Waiting for the discussion and decision on Planing the article.