social-auth-np

Making life easier to integrate social signup in applications

Install

npm install --save social-auth-np

Examples

https://github.com/keyrunpay/social-auth-np/tree/master/example

Pulling Examples to your local file

npx degit github:keyrunpay/social-auth-np/example#master social-auth

Usage Client Side

Social Login Button Component

import React from "react";
import socialAuthNp from "social-auth-np";

export default function FacebookAuthComponent() {
  const loginOption = {
    ...socialAuthNp.getClientSideOauthOption("facebook"), // available auth options "facebook", "google", "github", "linkedin"
    client_id: "FB_CLIENT_ID",
    redirect_uri: "http://localhost:3000/facebook_auth_callback",
  };
  const fbLoginUrl = socialAuthNp.getOauthUrl("facebook", loginOption); // available auth options "facebook", "google", "github", "linkedin"

  return (
    <div className="App">
      <br />
      <a href={fbLoginUrl}>
        <button>Login with facebook</button>
      </a>
    </div>
  );
}

Fb Redirected Page Component

import React from "react";
import socialAuthNp from "social-auth-np";
import Axios from "axios";

export default function FacebookCallback() {
  const code = socialAuthNp.parseUrl(window.location.search).code;
  const [resp, setResp] = React.useState(null);

  const submitCode = async () => {
    try {
      const { data } = await Axios.get(
        "http://localhost:6001/auth/facebook?code=" + code
      );
      setResp(data);
    } catch (err) {
      setResp(err.response.data);
    }
  };

  React.useEffect(() => {
    if (code) submitCode();
  }, [code]);

  return (
    <div>
      <p>FB Code is: {code}</p>
      <p>Please wait submitting code for verification..</p>
      {resp && <p>{JSON.stringify(resp)}</p>}
    </div>
  );
}

Usage Server Side

const socialAuthNp = require("social-auth-np");

const authFacebook = async (req, res) => {
  const { code } = req.query;

  if (!code) {
    res.status(401).json({ error: "Code is required" });
    return;
  }

  const params = {
    client_id: "CLIENT_ID",
    client_secret: "CLIENT_SECRET",
    redirect_uri: "http://localhost:3000/facebook_auth_callback",
    code,
  };

  try {
    const { data } = await socialAuthNp.getAccessToken("facebook", params); // available auth options "facebook", "google", "github", "linkedin"
    const access_token = data.access_token;
    if (!access_token) {
      res.status(401).json({ error: "Expired or bad code" });
      return;
    }
    const response = await socialAuthNp.getUserInfo("facebook", access_token); // available auth options "facebook", "google", "github", "linkedin"
    /*
        I hope from here you will use the info that is generated to match with your
        own database info and do issue JWT token  or make a session for user
    */
    res.json(response.data);
  } catch (err) {
    res.status(401).json({ error: "Expired or bad code or network issue" });
  }
};

module.exports = authFacebook;

Information

The example provided here is in ReactJS but this package is compatible with all fontend framework like angular, vue, react.... Feel free to use and create ans issue if you find any bug

About Author

Kiran Neupane
[email protected]
Facebook

Support This Package

React Tutor @ Youtube

Channel Name: Buggged
Youtube
Website

License

MIT © keyrunpay