codi.link icon indicating copy to clipboard operation
codi.link copied to clipboard

feat(Root): add short links to easy share it 🔗😊 and github authentication 🐙🐈

Open dartilesm opened this issue 4 years ago • 6 comments

Description

Generate short links when using codi.link to easily share with friendly links. For this purpose I am using firebase

TODO list

  • [x] Generate fully shareable short links
  • [x] Enable github authentication 🐙🐈

Preconditions

Firebase Config

As you know we need to use sensitive data to create the database, that is why there are environment variables with the prefix VITE_FIREBASE_, so you can replace it with your personal firebase data.

Github authentication

  1. Add Firebase to your JavaScript project.
  2. In the Firebase console, open the Auth section.
  3. On the Sign in method tab, enable the GitHub provider.
  4. Add the Client ID and Client Secret from that provider's developer console to the provider configuration:
  5. Register your app as a developer application on GitHub and get your app's OAuth 2.0 Client ID and Client Secret.
  6. Make sure your Firebase OAuth redirect URI (e.g. my-app-12345.firebaseapp.com/__/auth/handler) is set as your Authorization callback URL in your app's settings page on your GitHub app's config.
  7. Click Save.

More info here

Demo

Short links

codi-link-short-link

Github authentication

codilink-github

closes #7 closes #8 closes #100

dartilesm avatar Oct 07 '21 00:10 dartilesm

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/midudev-pro/codi-link/5ViC3A75eD46hZmUFxPKuqmt4ECu
✅ Preview: https://codi-link-git-fork-dartilesm-feature-databas-d70bb9-midudev-pro.vercel.app

vercel[bot] avatar Oct 07 '21 00:10 vercel[bot]

Nice @dartilesm :tada:

:bulb: Some ideas:

  • Create button that create (in that moment) the unique ID.
  • Once the ID has been created, in order to prevent a lot of firebase requests, I'm thinking in two options:
    • Create a button to force save the current link (this is the one I like, because it's the user who ensures when save the content)
    • Make a debounced request (with last updated time?) to autosave (autosave would be an option too)
  • The shareable link may be in readonly mode or write mode (open collabs).
    • If the link is in readonly mode, the save option don't work and a new unique ID creation will be needed, in order to modify the content.

This is, for sure, a big PR and too many decisions will need to take care, don't think? @midudev, could you help us with some guidelines to follow? So, the PR is not too open to decisions. Thanks :)

javigaralva avatar Oct 07 '21 08:10 javigaralva

About realtime collabs there's a nice PR #126 with peerjs and convergencelabs, maybe you should wait for midu to review that PR before trying to implement the same functionality and try to adapt @tomimelo to your needs.

QuevedoIB avatar Oct 07 '21 10:10 QuevedoIB

Nice @dartilesm,

Things to consider:

  • Create button that create (in that moment) the unique ID.

  • Once the ID has been created, in order to prevent a lot of firebase requests, I'm thinking in two options:

    • Create a button to force save the current link (this is the one I like, because it's the user who ensures when save the content)
    • Make a debounced request (with last updated time?) to autosave (autosave would be an option too)
  • The shareable link may be in readonly mode or write mode (open collabs).

    • If the link is in readonly mode, the save option don't work and a new unique ID creation will be needed, in order to modify the content.

This is, for sure, a big PR and too many decisions will need to take care, don't think? @midudev, could you help us with some guidelines to follow? So, the PR is not too open to decisions. Thanks :)

Hi @javigaralva, thank you.

This PR is in an early stage of development, so I will keep these recommendations in mind.

dartilesm avatar Oct 07 '21 11:10 dartilesm

About realtime collabs there's a nice PR #126 with peerjs and convergencelabs, maybe you should wait for midu to review that PR before trying to implement the same functionality and try to adapt @tomimelo to your needs.

Hi @QuevedoIB,

You're absolutely right, luckily I didn't do anything about real-time collaboration. For now, I put a to-do list to take advantage of using firebase. At the time I was writing this, that wonderful PR did not exist so I will discard that task.

I know that our friend @tomimelo had requested to do this task, but as several days passed I thought he had given up. It was my mistake not to ask before, in the same way that task is his and he already did a great job 🤩🥳

dartilesm avatar Oct 07 '21 11:10 dartilesm

About realtime collabs there's a nice PR #126 with peerjs and convergencelabs, maybe you should wait for midu to review that PR before trying to implement the same functionality and try to adapt @tomimelo to your needs.

Hi @QuevedoIB,

You're absolutely right, luckily I didn't do anything about real-time collaboration. For now, I put a to-do list to take advantage of using firebase. At the time I was writing this, that wonderful PR did not exist so I will discard that task.

I know that our friend @tomimelo had requested to do this task, but as several days passed I thought he had given up. It was my mistake not to ask before, in the same way that task is his and he already did a great job 🤩🥳

Hi @dartilesm, thanks! Yes, I was very busy at work so I couldn't spend a lot of time on it. Anyway, I think with your PR and a Firebase integration we could extend the collab sessions functionality a lot more. Something like persistent sessions, add friends, a chat... Also, like @javigaralva mentioned, we could add a option to set the session as read-only mode. The way codilink is growing is huge!

tomimelo avatar Oct 07 '21 15:10 tomimelo