The StarLogin API is a Open-Source authentication system that allows developers to focus more on their application rather than spending time setting up and managing their own authentication systems. StarLogin handles the login, user management, and the authentication flow while you can focus more on your application.

When you click on "login with StarKloud", your app opens up a popup window on your user's browser with your API Key as a url parameter. StarKloud API systems pulls your app's display name, app icon, and relevant information that will be used during login. This information is then displayed on the login screen allowing users to login via StarKloud.

Once login is processed by StarKloud API Systems; the user's Name, and email is passed on to the parent window (the browser tab that launched the login) via a message.

Example of how event listening has been implemented on the dashboard login:

Parent Window recieves the following message:

{ email : ""[email protected]" lname : "Doe" loginevent : "login_success" name : "John Jackson" uid : "USER UUID" }D" }

You can add an event listener on your app (parent) to capture this information

window.addEventListener('message', function(event){
            if(event.origin !== window.location.origin) return; 
                if(event.data.loginevent === 'login_success'){
                // ADD YOUR LOGIC HERE (THIS CAN BE A POST REQ TO YOUR MAIN SERVER)
                }
  
        })

  })

Implementing StarLogin is quite easy. Firstly get an API Key by logging into StarLogin Dashboard and filling out info about your api. Copy the key for later use

1. Add the button CSS To add the button css add this into your website header tag (this is the css for the login button) Login with StarKloudoud</button>
2. Add an event listener to open a new window with the login Replace the YOUR_API_KEY_HERE with your actual API key from the dashboard

    document.getElementById('sl_login_button').addEventListener('click', function(){
           window.open('/login/YOUR_API_KEY_HERE', 'starlogin_auth_popup', 'width=500,height=700');
       })
   )
   
3. You can add an event listener on your app (parent) to capture this information

window.addEventListener('message', function(event){
            if(event.origin !== window.location.origin) return; 
                if(event.data.loginevent === 'login_success'){
                // ADD YOUR LOGIC HERE (THIS CAN BE A POST REQ TO YOUR MAIN SERVER)
                }
  
        })

  })

Backend: Node.js, Express Templating/UI: EJS, HTML, CSS, client-side JavaScript Data/Auth: Supabase Config/runtime: dotenv, cookie-parser, cors Dev tooling: nodemonemon

Please see the picture to setup your own supabase database (RLS is disabled in this version)

All contributions to this repo are welcomed. Please create a pull request so i can review and accept changes.