feat: gitHub authentication to the application using GitHub's Device Flow O…

[emcconnell]

When the user clicks on the clone or push buttons in the UI they will be presented with the ability to launch the GitHub flow to create an auth token that will be stored in local storage. This makes cloning and pushing to private repos possible and follows best practices by GitHub. There are other enhancements that can be added to this but IMP this looks and works well.

This pull request introduces several significant changes to the app/components/chat and related files to enhance the Git cloning feature. The most important changes include the addition of a Git clone modal, updates to the GitCloneButton component, and the creation of a spinner for the cloning process.

Enhancements to Git cloning feature:

• app/components/chat/GitCloneButton.tsx: Added state management for modal visibility and refactored the clone logic to use the new GitCloneModal component. [1] [2] [3]
• app/components/git/GitCloneModal.tsx: Introduced a new modal component for cloning Git repositories, including authentication with GitHub, repository selection, and error handling.
• app/components/git/GitCloneSpinner.tsx: Added a spinner component to indicate the cloning process is in progress.

Minor improvements:

• app/components/chat/BaseChat.tsx: Updated the rendering logic for the GitCloneButton to ensure it is only displayed when importChat is defined.
• app/components/settings/features/FeaturesTab.tsx: Added a title attribute to the prompt library select element for better accessibility.

Other changes:

• app/commit.json: Added a new commit entry.
• app/components/sidebar/Menu.client.tsx: Added a new div wrapping the chat start input for better layout management.

Setup Requirements
Create a GitHub OAuth App:

Go to GitHub Settings > Developer Settings > OAuth Apps > New OAuth App
Fill in:
Application name: "Bolt Local" (or your preferred name)
Homepage URL: Your application URL
No callback URL needed (using Device Flow)
Environment Variables:
VITE_GITHUB_CLIENT_ID=[your client id]

[emcconnell]

SEE NEWER VIDEO LINKED BELOW

[coleam00]

This is FANTASTIC, thanks @emcconnell! I'll take a look at this tonight!

[coleam00]

Nice implementation @emcconnell! I love it!

Could you expand more on what this will be used for? Is this more to get ready for further integrations with Git like importing repos? It seems this sets up GitHub authentication but doesn't necessarily add a new "feature" to oTToDev. Or maybe I am missing something obvious.

But either way this is super important to have so thank you!

[emcconnell]

@coleam00

Is this more to get ready for further integrations with Git like importing repos?

Yes, that's correct. To merge now may be confusing as it doesn't add anything except auth to github. Also, @thecodacus is working in this direction also and not sure where we will land. If we wanted this, I could add some functionality for now like enhancing the current github push by using this auth flow. I only had time for this part and knew we had some open ideas on how to approach but wanted to toss what I had time for into the ring. So, maybe @wonderwhy-er or @thecodacus have some input on what to do with it for now.

[thecodacus]

this looks great @emcconnell , the git integration i am working on also will require a authentication if we want to clone a private repo. so this will really help for cloning gihub based repos. this is great 👍

[emcconnell]

Added this to the features as a "utility" feature. This video will explain it best: https://www.youtube.com/watch?v=envCOTYCBVI

Can we merge this? Or do we have specific comments? I realize we have a place to paste user and token in settings/connection.

[emcconnell]

@coleam00 @wonderwhy-er @thecodacus

See latest video here: https://youtu.be/Mq_eMsKszj4?si=uVnGzxqFUlmUlH2Z

[thecodacus]

@coleam00 @wonderwhy-er @thecodacus

See latest video here: https://youtu.be/Mq_eMsKszj4?si=uVnGzxqFUlmUlH2Z

this looks great, but can we show the connection option in the settings instead of the modal. cuz if the user want to use accessToken instead of oauth, then they will be confused

[emcconnell]

@coleam00 @wonderwhy-er @thecodacus
See latest video here: https://youtu.be/Mq_eMsKszj4?si=uVnGzxqFUlmUlH2Z

this looks great, but can we show the connection option in the settings instead of the modal. cuz if the user want to use accessToken instead of oauth, then they will be confused

Thank @thecodacus! I did have it there originally. @wonderwhy-er suggested to make it mor integrate into the flow of any GitHub action by the user, so I changed it to modal. I can make the option to use one or the other in settings. Does that sound good?

[thecodacus]

ohh..this looks very good in-terms of UX. but my only concern is, what if user has setup the github token using PAT, and does not want to go through the oauth app setup process sinse it requires setting up oauth app. how will he then see the UI? it will not allow them to clone right?

[emcconnell]

ohh..this looks very good in-terms of UX. but my only concern is, what if user has setup the github token using PAT, and does not want to go through the oauth app setup process sinse it requires setting up oauth app. how will he then see the UI? it will not allow them to clone right?

It's a good point. Let me give this one some thought and implement a solution. I will put this back in draft. It may take until the weekend to get it back out. Thanks for the comments!

[thecodacus]

sure. plus one more thing that came to my mind that the current flow allow user to pull from any git repo not only just github. but this restricting user to only use github.

[flikites]

@thecodacus thanks for brining up all these valid points.

As I am currently using PAT in my own isomorphic script to accomlish git from the Bolt terminal. And I do plan to use something other than GitHub as my git base.

I wanted to join this conversation so that I'm not bumping heads and we are all working towards the same common goal.

A worthwhile git intergration in Bolt.

I presume at this point, it is a goal of the diy project to automatically install isomorphic-git and make it available through the terminal for the end user to use? And a UI for them to set their PAT

Is their any form of democratic process in place that is used to determine which .diy features make it into the .new product?

Also ...
@thecodacus one thing I'm seeing right now in my tests on bolt.new is that the.git directory is not being persisted on browser refresh. Should I expect that same behaviour on bolt.diy?

I'm new to Bolt and Stackblitz (and their webcontainers in general) - so I'm just trying to get a lay of the land;

Browsing through the communtiy forum I came across this post;

https://thinktank.ottomator.ai/t/idea-for-github-oauth-access/624/26?u=cloutedd

And I wholeheartedly agree that this is the way it should work.

I'd like to collaborate and contribute, but first I'd hope we can all b eon the same page and have a clear plan of action ahead.

[thecodacus]

Is their any form of democratic process in place that is used to determine which .diy features make it into the .new product?

Also ... @thecodacus one thing I'm seeing right now in my tests on bolt.new is that the.git directory is not being persisted on browser refresh. Should I expect that same behaviour on bolt.diy?

so .new and .diy are two separate project, we are not syncing features and being developed independently. so we might bring feature from one to another but not something that will surely happen.

[flikites]

Is their any form of democratic process in place that is used to determine which .diy features make it into the .new product?
Also ... @thecodacus one thing I'm seeing right now in my tests on bolt.new is that the.git directory is not being persisted on browser refresh. Should I expect that same behaviour on bolt.diy?

so .new and .diy are two separate project, we are not syncing features and being developed independently. so we might bring feature from one to another but not something that will surely happen.

Thanks for the reply.