General OAuth client (OpenID Connect)

[BOLL7708]

What would this gadget do?

A way to perform OAuth authentications with Aardvark.

Who would use this gadget?

Would be neat if it could become a component others could use to integrate their own gadget with any online service that supports it, tailoring it for OpenID Connect which is widely adopted.

Assuming that you're on the team, what other skillsets would you need to make this project happen over a couple days of hacking?

React knowledge would be useful, as I lack that.

What will be the toughest part of building this gadget?

Just figuring out how to do this in an accessible and intuitive way, that comes before implementation.

Side note, closed my other projects as this one kind of took over. Both of those would use this as a component though, so there's that.

[BOLL7708]

While thinking about this, I realized that the most straight forward way would probably be to have a page outside of VR that lets a person sign in to various authentication providers, Google, Twitter, Facebook, Twitch, etc. It doesn't even have to be OAuth at that point, just links to the various login pages so the user can sign in to the service to store a session.

Then, if gadgets all run in the same space, any OAuth against a service already signed in will be a clicky affair, no data entry, if it works as it usually does anyway. Otherwise there are complications like 2-factor-authentication, in that case the user still has to bring out their phone while in VR, so why not take care of this beforehand.

[BOLL7708]

I feel like writing a diary here, instead of spamming the Slack, not sure which is worse. In any case, I was mostly sketching up what to do yesterday, was tired after work and I seemingly have a cold that is making me somewhat lacking in energy, at least I hope it's the common cold.

• This morning I've gone through the guide to setting up React, still not familiar with jsx/tsx so that's still to digest.
• Been setting up a couple of test gadgets and things appear to be working. Noticed that a gadget spawned at 0,0,0 in space using the "Start Gadget" button could not be grabbed even with a grabbable, and could not be removed by the scanner, curious.
• Also bumped into the input issue where controller would get stuck, but that's been talked about on Slack.
• Right now I feel like making a script that restarts Aardvark as a means to reload a widget, instead of deleting it and spawning it again, as is mentioned in the Watch tutorial.
• Still making my way through that one, and after that I'll watch the workshop regarding it. Now lunch!

[BOLL7708]

Long day, now soon 2AM over here. Found out and realized a number of things.

• Don't mess with the page right now, as it's the whole gadget, not just the panel. Refreshing or navigating ends in tears!
• It was pointed out target="_blank" actually does work, it opens an AardvarkXR window on the desktop, and signing in there does create a session. This is one possible way of getting an access token.
• While signed in, I tried doing the OAuth straight in the gadget, which ended in tears.
• Opening a URL with the Av().startUrl() works and lets us use the current session, it requires a fully implemented OAuth client page and a means of conveying the resulting access token back to the gadget. Joe instructed me in how, but have not tried it yet.
• Mucked about with just getting the Twitch APIs connected from the gadget code. In the end I did not manage to get the Helix API working, they just refuse my token that works in Postman, I have no idea. I did manage to connect to PubSub and listen to channel point rewards though, which is neat.

[BOLL7708]

Sunday to me was a bit chaotic for me so didn't get much time coding, but it felt like I had to show at least something for my efforts.

• OAuth felt like a closed chapter, it kind of works and kind of doesn't. Best way for a hosted gadget might be to build a full OAuth client on desktop, and then try to pipe the result back to the gadget. Pretty sure that's possible but I didn't get to start experimenting with that.
• For the day, as I got PubSub to work I used that code in a new gadget, removed the grabbable and started it from the button to get it to be at 0,0,0. I scaled up the AvPanel and made contents that tiled a gif at the bottom and used a transparent background. It created a firewall in the game. It should be possible to wrap this around a custom mesh, I didn't get there though. The end result is something that I originally proposed, but in a very simplified form.
• Ended up recording a demo, it's not a gadget worth pushing due to its very hacked together state. The access token was hard coded to make it quick to build, same with the channel ID which otherwise takes a Helix API call. There's no keep-a-live built in, which is something the PubSub connection demands to keep a connection open. But, it ended up in a video anyway, so yay.

End thoughts. I'm happy with how well it worked, the WebSocket connection is pretty much immediate, but I'm starting to question if letting viewers cause big events in VR would be too disruptive, and at the same time if they weren't wouldn't it a waste of points and time? And would I feel forced to act out surprise when they get triggered? That's not really me, so I'm pondering pivoting to start with a chat system and perhaps a notification from PubSub what normal rewards have been unlocked, like taking a break etc. Something to consider.

Edit: Final thoughts on AardvarkXR?

• Testing it out earlier in the year, around April I believe, I didn't even get it running. Setup then was a bit more convoluted, now it's brilliant. Just install and run, done.
• What intrigues me the most is the shared space of all gadgets, that we have a 3D scene instead of just flat planes all over the place. It feels like this opens up things a whole lot. That is also a bit intimidating as I haven't done serious 3D modelling in what, 15 years? It's been a while.
• The fact things are loaded off of internet hosts is fascinating, it means gadgets can get updated automatically, we can integrate towards other web services, get things into the system without much headache. Kind of like what I tried doing during the Hackathon.
• The whole build system does also feel a bit scary. I did read the starter's guides to NPM and React, some notes on Webpack. Luckily the default project setup makes that a breeze, and it certainly makes things less confusing by having gone through those guides.
• Even if I did go through the React tutorial, I'm still not sure how to apply that inside AardvarkXR. It made me hesitate how to update the React DOM and in the end I'm just doing standard DOM stuff, which is probably not the point. Thus I need to learn more React. 👀💦 I think this could be a semi-high bar for some developers, or at least it is for me, but I'll try to get through this 2½ hour introduction video I found at some point.
• Iteration, as I did most my stuff inside the AvPanel I actually was sitting mostly on the debug page reloading that and not actually poking around with the actual gadget inside VR. It worked out well enough, but felt like that tactic is only useful for certain tasks. Joe has mentioned some things on Slack regarding improving this for the rest of the workflow so looking forward to that.