explaingit

mrswitch/hello.js

4,630JavaScriptAudience · developerComplexity · 2/5Setup · moderate

TLDR

A JavaScript library that adds social sign-in buttons for Google, Facebook, and Windows Live to any website, handling the OAuth handshake and letting you fetch user profile data after login.

Mindmap

mindmap
  root((hello.js))
    What it does
      Social sign-in
      OAuth handling
      Profile data fetch
    Providers
      Google
      Facebook
      Windows Live
    Features
      Single unified API
      Module extensions
      Data retrieval
    Setup
      npm or download
      Provider registration
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a Sign in with Google or Sign in with Facebook button to a website without building OAuth from scratch.

USE CASE 2

Fetch a logged-in user's profile picture, contact list, or photo albums from Facebook or Google after they authenticate.

USE CASE 3

Support multiple social login providers with a single consistent API instead of writing separate code for each provider.

Tech stack

JavaScriptnpmOAuth

Getting it running

Difficulty · moderate Time to first run · 30min

Requires registering your app with each social provider to get API credentials before the sign-in flow will work.

In plain English

hello.js is a JavaScript library that makes it easier to add sign-in with social accounts to a website. If you want your users to be able to log in using their Google, Facebook, or Windows Live accounts rather than creating a separate username and password, hello.js handles the technical process of doing that from inside the browser. The underlying mechanism it uses is called OAuth, a standard way for websites to ask for permission to act on a user's behalf on another platform. OAuth normally requires a fair amount of setup, and the details differ from one provider to the next. hello.js wraps all of that into a single consistent interface so you can write one block of code that works across multiple networks instead of writing separate handling for each one. Beyond signing in, hello.js can also retrieve data from those platforms after a user is authenticated. For example, once someone has signed in with Facebook, you can use the library to fetch their profile picture, contact list, photo albums, or status updates. The same calls work across Google and Windows Live where those services support it, and the library documents which features are available on each provider. To get started, you register your application with whichever social platforms you want to support, include the hello.js script on your page, initialize it with the app credentials you received during registration, and then add a button that triggers the sign-in flow. The library handles the redirect and callback steps automatically. Installation is available via npm or as a direct download. The project is modular, meaning support for additional platforms can be added through separate module files beyond the three main providers. A newer version under active development is available on a separate branch for those who want to try a more modern rewrite of the library.

Copy-paste prompts

Prompt 1
Show me the hello.js code to add a Sign in with Google button to my website and display the user's profile photo after login.
Prompt 2
I want users to sign in with Facebook using hello.js and then fetch their friend list. Write the initialization and data-fetch code.
Prompt 3
Set up hello.js with both Google and Facebook providers in a single-page app and handle the sign-in callback to store the user token.
Prompt 4
How do I register my app with Google to get the credentials hello.js needs, and then initialize hello.js with those credentials on my page?
Open on GitHub → Explain another repo

← mrswitch on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.