How to setup Github/Google OAuth?

Hmm… no mention of Python:

image

Admin. Or you can use the REST API…
(Also see firebase · PyPI)

Are you using Flask or any webpage or is it just console?

Yes, I’m using Flask.
Also, do I use the Web auth method and use the Python library to take the login info?

1 Like

Yeah, you could probably do it that way.

I’m more of a front-end type of guy so I would just use the web sdk and do it that way, but since you’re already using a server, you should probably use Firebase Admin to securely validate everything.

@boston2029 Unfortunately, when I use Firebase hosting to setup the domains, the issue is that the confirmation link gives localhost, but since we’re using Replit, localhost can’t be used.
(I already used npm in a Python repl)

I actually already set up github auth in https://replit.com/@doxr/github-oauth-callback-test#index.js and you can test it (doesn’t work with the .dev URLs, use https://github-oauth-callback-test.doxr.repl.co/)
I tried to use AI to convert the code (idk python or flask) to python; to confirm that the code is correct I ran it and made a github oauth test thing and it works! (after manually having to correct some of it ofc)

https://practicalsoreattributes.doxr.repl.co/

in that repl I had this function that a button ran with onclick so a window opens and once the thing successfully completes the main page refreshes.

js
 let loginWindow = null;

function openWindow() {
  if (loginWindow && !loginWindow.closed) {
    return;
  }
  var width = window.screen.width * 0.2;
  var height = window.screen.height * 0.5;

  var left = (window.screen.width / 2) - (width / 2);
  var top = (window.screen.height / 2) - (height / 2);

  loginWindow = window.open("https://github.com/login/oauth/authorize?client_id=" + GH_CLIENT_ID, "", `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=${width}, height=${height}, top=${top}, left=${left}`);
}

var checkClosedInterval = setInterval(function() {
  if (loginWindow && loginWindow.closed) {
    clearInterval(checkClosedInterval);
    window.location.reload();
  }
}, 1000);

it is frontend

so the button would be:

<button type="button" onclick="openWindow()">test</a>

  1. someone, anyone can use your gh client id to log in and stuff
  2. github redirects to your auth callback URL with a code, you’re supposed to use that code with the gh secret in the callback thing to make a token that will give you information about the user, and store it. the repl does that and creates a cookie with the token (only you should have that secret, that prevents other people from getting information)
  3. when you need to get information then you just use something like this (I use it in my repl, note that I set up /grab in the repl so you do need to get stuff in the backend code and put it in the flask repl so it works)
    async function fetchData() {
      let change = document.getElementById('change');
      try {
        const response = await fetch('/grab');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        // you can use response data stuff as json
        const data = await response.json();

       // this is just for making the response visual
        let goodData = JSON.stringify(data);
        change.innerHTML = goodData;
      } catch (error) {
        console.error('There has been a problem with your fetch operation:', error);
      }
    }
    fetchData(); // will return {"error":"not authorized"} if the user is not logged in

(front end)

now when you need to get information you can run fetchData()

2 Likes

I had to setup Firebase hosting on my repl to connect the auth. I needed to specify a folder for the code. Is there a way I can not put all the files in a folder, but use the root directory instead when running firebase init?
Also, is there a way to not use Firebase hosting when using auth? It’s very troublesome as I can’t even login with Replit when viewing the hosted site. Firebase hosting also requires an index.html file, whivh I don’t have. I could rename it but it’s all in the templates folder and will be quite troublesome.
TL;DR: Can I use Firebase auth without Firebase hosting?

1 Like

How about specifying . when it wants a directory?

Uh…yeah? Why did you use it in the first place?

1 Like

Because the callback url was using Firebase’s domain given and not my own repl’s.

2 Likes

The callback URL should still be on a project-id.firebaseapp.com domain, even without setting up Hosting.

1 Like