Adding notifications on successful device code phish / warning on expired device code

[HuskyHacks]

I asked the universe for something like this project and then GraphSpy landed in my lap, so I want to give back and help develop the project.

This adds a type param to the toast notifications as an option to set the background. I also added a notification for successful device code authentication, which lets you know during the polling interval as soon as your device code phish has landed successfully!

More to come! This project has a ton of potential and I'd love to help develop it.

[RedByte1337]

Hi HuskyHacks,

Thanks for the PR! This looks great! (I did not expect anyone to be able to reverse-engineer my code and submit such an awesome feature to it so quickly tbh haha)

I also thought about creating a notification when a device code auth succeeded, but I didn't want to deal with web sockets, although your solution is very subtle and clever!

I will test this soon!

[RedByte1337]

Hmm, there is one issue with this approach though. It seems like every time you reload the page, it will spam you with notifications of all historical succeeded/expired device codes, which is not really ideal ofc, since you are expected to be able to move away from the device code page at any time and come back while it continues to poll in the background.

It's fine when you don't have many device codes in the database yet, although once you have a lot of device codes, you will be greeted with something like this each time you open the device codes page 😅

We might want to differentiate between a first call of the checkDeviceCodeStatus() function, where it will only populate the variables but not trigger any notifications, and all subsequent calls, where notifications can be triggered on changes.

Otherwise, we could maybe store the IDs of device codes which need to still receive notifications in a cookie/session storage when a new device code is created, and remove it once its status changes to success/expired.

Let me know what you think!

[RedByte1337]

I think storing it in session storage might be better, because then it will also trigger if the user opens the device code page after they browsed away to a different page and the status changed in between.

[HuskyHacks]

I updated it to store the state of notifications in local storage, so notifications should now never fire more than once. The storage also persists between pages and between browser close and re-open.

[HuskyHacks]

Also added some color to the rows for SUCCESS and EXPIRED

Light mode:

Dark Mode:

Also detects the Auto theme setting and sets the row background color appropriately

[RedByte1337]

It's implemented great, although I'm still in doubt whether this would be the way to go after some additional testing now. The problem is when changing databases, the IDs will be linked to different device codes. So then you would need to clear the ID list in the session storage on database change, although if you change back to the original database, it would show you all the notifications again. Or you would need to keep track of the notified IDs per database and what the active database is in local storage as well, but then it gets really messy to do this client-side tbh.

Although I really like the idea, so I think I might gonna have to look into some websocket solution eitherway (probably this) where the GraphSpy server will send a notification to the client when a device code expires or succeeds, which will be a lot cleaner and will be reusable for other things in the future as well (e.g. access token expiry, etc...). The benefit here would be that we would be able to show the notification on any page, even if the user doesn't have the device code page open anymore. And if no client is connected (i.e. the server is running without the browser being open), notifications can be stored on the server in the database until the user opens the browser again.

The colors for the notifications and device code statuses are nice though, so I'll try to merge that part already!

[HuskyHacks]

Cool! Feel free to grab the code for the colors and then close this PR out.

[RedByte1337]

Added color to the device code table and implemented the option to style the notifications as well!

The Access Tokens table also uses these colors now to easily differentiate between expired and non-expired access tokens!

[RedByte1337]

Implemented here https://github.com/RedByte1337/GraphSpy/commit/4f7ff9abda6a4eb08ce472484bc61f7cef5e187d and gave you credit in the release notes. Thanks @HuskyHacks!