Meteorjs

Github

Nodejs

JavaScript

Social Media

Meteor Social Login with GitHub

Henrique A Schmaiske

4 min readApr 13, 2022

We all know how time-consuming it is to configure a social login with an app. Fortunately, Meteor comes with different third-party authentication methods and an account management system out of the box. We are going to use the accounts-github to be able to use your GitHub account to log in to our app.

Creating your project

Start by creating a new Meteor project. Before moving to the next step, enter the project folder and run it to make sure it is all correct.

By default, Meteor uses React, and when the project is created, it creates a subdirectory with the same name.

$ meteor create meteor-github-login

$ cd meteor-github-login

$ meteor run

You should see the screen below:

Install accounts package

We are going to use the accounts-github to be able to use your GitHub account to log in into our app:

$ meteor add accounts-github

Also, add the `service-configuration` package to set up your GitHub secret keys:

$ meteor add service-configuration

There are many more authentication methods supported. You can read more about the accounts system here.

Create Login with GitHub Button

We need to create a button component that the user will click to open a popup to log in with their GitHub account.

You should use Meteor.loginWithGitHub(); function and pass 2 arguments to it: requestPermissions and loginStyle , the first is to get the user information from GitHub, and the second is to open our popup.

imports/ui/LoginWithGithub.jsx

import React from 'react'
import { Meteor } from 'meteor/meteor'export const LoginWithGithub = () => {
  const handleGithubLogin = () => {
    Meteor.loginWithGithub({
      requestPermissions: ['user'],
      loginStyle: 'popup',
    })
  }
  return (
    <button type="button" className="github-btn" onClick={handleGithubLogin}>
      Login with Github
      <div>
        <svg fill="#000000" viewBox="0 0 30 30" width="20px" height="20px">
          <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z" />
        </svg>
      </div>
    </button>
  )
}

Also, let’s add some style to it to make it beautiful:

client/main.css

.github-btn {
  border: 1px solid #e1e5f0;
  background-color: #fff;
  width: 245px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.github-btn > div {
  margin-left: 4px;
}

We need to import our new component into our App.jsx , I also like to do a little cleanup removing the Hello and Info components.

Get Henrique A Schmaiske’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

imports/ui/App.jsx

import React from 'react'
import { LoginWithGithub } from './LoginWithGithub.jsx'export const App = () => {
  return (
    <div>
      <h1>Meteor Login With Github</h1>
      <LoginWithGithub />
    </div>
  )
}

GitHub Credentials

In order for our GitHub login to work, we need to get our GitHub Credentials first.

Register your OAuth Application on this link fill the Application Name , Homepage URL , and the Authorization callback URL , for both URLs, you can use http://localhost:3000 for now.

Click on Register Application

On the next screen, grab your Client ID, click on Generate a new client secret and copy your new client secret.

We are going to use both of these keys to connect to GitHub.

Now, we need to configure our server to fully connect to GitHub, go to server/main.js , and import the ServiceConfiguration to add your GitHub credentials.

I also removed everything from here to keep our code cleaner.

server/main.js

import { Meteor } from 'meteor/meteor'
import { ServiceConfiguration } from 'meteor/service-configuration'Meteor.startup(() => {})ServiceConfiguration.configurations.upsert(
  { service: 'github' },
  {
    $set: {
      loginStyle: 'popup',
      clientId: '', // insert your clientId here
      secret: '', // insert your secret here
    },
  },
)

Awesome! You now have your GitHub authentication configured, you can try to log in in with your own GitHub account.

Creating the login/logout logic

We can create a simple logic to verify if our user is logged in or not. We can use the useTracker hook to fetch our user data from Meteor.user() and also the Meteor.logout() to log out our user from the system.

Yes, it is simple as that, with no boilerplate nor configuration to make everything work.

imports/ui/App.jsx

import React from 'react'
import { Meteor } from 'meteor/meteor'
import { useTracker } from 'meteor/react-meteor-data'
import { LoginWithGithub } from './LoginWithGithub.jsx'export const App = () => {
  const user = useTracker(() => Meteor.user())
  const handleLogout = () => Meteor.logout()  return (
    <div>
      <h1>Meteor Login With Github</h1>      {user ? (
        <div>
          <p>Logged in as: {user.services.github.email}</p>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <LoginWithGithub />
      )}
    </div>
  )
}