DEV Community: Sahil kashyap

Stripe checkout: how to add extra columns like tips and how the discount off is calculated

Sahil kashyap — Mon, 05 Jan 2026 20:17:01 +0000

extra columns can be added y making them a product and overwriting their value on run time

amount off is distributed in different way

Video.js 8 quality selector

Sahil kashyap — Mon, 15 Jan 2024 04:24:35 +0000

Video tag:

<video id="my-video" class="video-js vjs-default-skin" width="640" height="360" controls>

    <source src="https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8" type="application/x-mpegURL">
    <!-- <source src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" type="application/dash+xml"> -->
  </video>

Lib used:

<link href="https://unpkg.com/jb-videojs-hls-quality-selector/dist/css/jb-videojs-hls-quality-selector.css" rel="stylesheet">

 <!-- videojs-contrib-quality-levels plugin -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-quality-levels/2.0.15/videojs-contrib-quality-levels.min.js"></script>
  <!-- jb-videojs-hls-quality-selector -->
  <script src="https://unpkg.com/jb-videojs-hls-quality-selector"></script>

make sure to add this is

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const player = videojs('my-video');

      player.ready(function() {
        player.hlsQualitySelector({
       displayCurrentQuality: true,
          });
      });
    });
  </script>

React native Search In SectionList

Sahil kashyap — Wed, 20 Sep 2023 12:47:13 +0000

SectionList with Search
Requirement: Add search in SectionList of react native

Here's Js code for filtering used

const sectionList = [{
    caption: 'caption1',
    data: [{
        id: '1',
        title: 'Payment',
        description: 'Pay info',
    }, {
        id: '2',
        title: 'Refund',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta et ipsam voluptate commodi nulla asperiores corporis, sapiente quasi obcaecati quae totam consequatur cum, perspiciatis pariatur !',
    }, {
        id: '3',
        title: 'Mobs',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta et ipsam voluptate commodi nulla asperiores corpori!',
    }, {
        id: '4',
        title: 'test',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta et ipsam voluptate commodi nulla',
    }, ],
}, 
{
    caption: 'caption2',
    data: [{
        id: '5',
        title: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae eveniet?',
        description: 'Custom desc',
    },{
        id: '9',
        title: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae eveniet?',
        description: 'Lorem ipsum Custom desc',
    }, ],
}, ];
const query = 'Lorem ipsum' // Not working

const res = sectionList
  .map(d => ({ ...d, data: d.data.filter(c => c.description.includes(query)) }))
  .filter(d => d.data.length)

console.log(res);

React native Search In SectionList

Sahil kashyap — Fri, 01 Sep 2023 13:29:03 +0000

SectionList with Search
Requirement: Add search in SectionList of react native

Here's Js code for filtering used

const sectionList = [{
    caption: 'caption1',
    data: [{
        id: '1',
        title: 'Payment',
        description: 'Pay info',
    }, {
        id: '2',
        title: 'Refund',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta et ipsam voluptate commodi nulla asperiores corporis, sapiente quasi obcaecati quae totam consequatur cum, perspiciatis pariatur !',
    }, {
        id: '3',
        title: 'Mobs',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta et ipsam voluptate commodi nulla asperiores corpori!',
    }, {
        id: '4',
        title: 'test',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta et ipsam voluptate commodi nulla',
    }, ],
}, 
{
    caption: 'caption2',
    data: [{
        id: '5',
        title: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae eveniet?',
        description: 'Custom desc',
    },{
        id: '9',
        title: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae eveniet?',
        description: 'Lorem ipsum Custom desc',
    }, ],
}, ];
const query = 'Lorem ipsum' // Not working

const res = sectionList
  .map(d => ({ ...d, data: d.data.filter(c => c.description.includes(query)) }))
  .filter(d => d.data.length)

console.log(res);

How to populate mythtv EPG

Sahil kashyap — Tue, 01 Aug 2023 14:00:17 +0000

On how to install mythtv in ubuntu
https://www.mythtv.org/wiki/Mythbuntu_Control_Panel

Let's get the epg data

install xmltv https://www.mythtv.org/wiki/XMLTV
type this in cmd tv_find_grabbers
pick a free epg let's say tv_grab_eu_xmltvse tv_grab_eu_xmltvse --configure --config-file $HOME/.mythtv/EUEPG.xmltv

then a list of channel wil come 1 by 1
type yes to the channel you want the data for
and keep pressing enter for the unwanted channel

lets get 4 days of data
tv_grab_eu_xmltvse --config-file $HOME/.mythtv/EUEPG.xmltv --days 4 --quiet

Now
Open the MythTV-Setup. $mythtv-setup
Go to Video Sources (option 4).
click on create new video source
give it 5 second new entry will show up open it

Enter the videosource name
Go to the "Listings grabber" and hit enter. Scroll through the list until you see

save and exit
and run the mythfilldatabase
it will fill up the database,

Assuming you have installed mythweb
go to this link and your data will show up
http://localhost/mythweb/tv/list

Sadly the epg won't show up in mythtv-frontend
if there's no input refer to this https://forum.mythtv.org/viewtopic.php?t=599

but i only wanted the epg data so i don't care about the mythfronend

When migrating to a new payment gateway: how to make the new customer ids

Sahil kashyap — Thu, 16 Feb 2023 19:07:04 +0000

Problem:Previously stripe was being used, new paymentgateway 'square' was introduced in the project.
Now New customer will have the squareID and stripeID.

But what about the backward compaitibilty (the old users)

Solution :

make a script that generates squareId for all the old users. -Since paymentGateway have rate limit on customer account creation.
Delay the api calls
Process the old customer in chunks

const mongoose = require("mongoose");
const Customer = mongoose.model("Customer");

const { Client, Environment, ApiError } = require("square");
const crypto = require("crypto");
// const JSONBig = require("json-bigint");
const dev = require("../config/dev.js");

var _ = require('underscore');
const squareAccessToken = dev.squareAccessToken;
const squareLocationId = dev.squareLocationId;

const SQUARE_ACCESS_TOKEN = squareAccessToken;
const locationId = squareLocationId;

const client = new Client({
  accessToken: SQUARE_ACCESS_TOKEN,
  // change Envirnoment on production
  environment: Environment.Sandbox,
  httpClientOptions: {
    timeout: 10000,
    retryConfig: {
      maxNumberOfRetries: 2,
      maximumRetryWaitTime: 1000000,
    },
  },
});

/**
 * Creates square customer
 * @param {*} user 
 * @returns square customer
 */
async function createsquareUser(user) {
  try {
    let squareOBJ = getSquareCustomerOBJ(user);
    let createCustomerResponse = await client.customersApi.createCustomer(
      squareOBJ
    );
    const customer = createCustomerResponse.result.customer;
    // console.log("aquare cus", customer);
    return customer;
  } catch (error) {
    if (error instanceof ApiError) {
      error.result.errors.forEach(function (e) {
        console.log(e.category);
        console.log(e.code);
        console.log(e.detail);
      });
      throw {
        status: 400,
        message: error.result.errors,
      };
    } else {
      console.log("Unexpected error occurred: ", error);
      throw error;
    }
  }
}

/**
 * Make obj for square create customer request
 * @param {*} res 
 * @returns Object
 */
function getSquareCustomerOBJ(res) {
  let customer = {};
  customer.birthday = res.dob;
  customer.emailAddress = res.email;
  customer.givenName = res.name.first;
  customer.familyName = res.name.last;
  // phone number not used cuz square folllows is strict rules,chances of failure decrease on removing it
  // customer.phoneNumber = '+' + res.dialCode + res.phone;

  customer.idempotencyKey = crypto.randomBytes(20).toString("hex");
  // delete customer.phoneNumber;

  return customer;
}

/**
 * Return customer in chunks,cursor based pagination used
 * MAKES SQUARE Customer on each doc 
 * In Customer's doc a key will be added:  
 * paymentProviderUserIds:{squareID:'squareID',stripeID:'stripeID'}
 * @param {*} limit 
 * @param {*} cursor 
 * @returns Paginated data
 */

async function cursorBasedPaginationForCreatingSquareUserId(limit, cursor) {
  let decryptedCursor;
  let customerCollection;
  if (cursor) {
    // decryptedCursor = decrypt(cursor)
    // let decrypedDate = new Date(decryptedCursor * 1000)
    customerCollection = await Customer.find({
      __t:"Customer",
      _id: {
        $lt: mongoose.Types.ObjectId(cursor),
      },
    })
      .sort({ _id: -1 })
      .limit(limit + 1)
      .lean()
      .exec();
  } else {
    customerCollection = await Customer.find({__t:"Customer"})
      .sort({ _id: -1 })
      .lean()
      .limit(limit + 1);
  }
  const hasMore = customerCollection.length === limit + 1;
  let nextCursor = null;
  if (hasMore) {
    const nextCursorRecord = customerCollection[limit];
    nextCursor = nextCursorRecord._id;
    // customerCollection.pop();
  }
  //--------this is used to create SquareUsersId--------------

  const deferreds = customerCollection
  .map( customer =>
    // Wrap each request into a function, which will be called
    // sequentially and rate-limited

    // If you want to have both the payload and its results
    // available during post-processing, you can do something like:
    () => {
      // const {payload} = customer;
      return {
        _id:customer._id,
        result: createsquareUser(customer)
      }
    }
    // () => createsquareUser(customer) 
    );
    const result = [];
    for (const next of deferreds) {
      try {
        // Call the wrapper function, which returns `createSquareCustomer` Promise(api),
        const value = await next();
        result.push(value.result);
      } catch(err) {
        console.log(err);
      }

      // Rate limit
      await delay(2000);
    }
    // console.log("All result",result);
    let customerData=customerCollection;
    let SquareCustomer = (await Promise.all(result)).map(item => {
      return {
        sqId: item.id,
        emailAddress: item.emailAddress
      };
    });

    //join/merge data based on email
  let mergedData = customerData.map(o => Object.assign(
    {}, o, SquareCustomer.find(o2 => o2["emailAddress"] === o["email"])
));
  // console.log("SquareCustomer",SquareCustomer);
  // console.log("mergedData",mergedData);

    Customer.bulkWrite(
      mergedData.map(({ _id, sqId, stripeID }) => ({
        updateOne: {
          filter: { _id },
          update: {
            $set: {
              paymentProviderUserIds: {
                squareID: sqId,
                stripeID: stripeID,
              },
            },
          },
          upsert: true,
        },
      }))
    )
  return {
    data: customerCollection,
    paging: {
      hasMore,
      nextCursor,
    },
  };
}

/**
 * Recursive fuction loops through all pages in cursor based pagination
 * @param {*} cursor 
 * @param {*} data 
 * @param {*} payload 
 * @returns 
 */
async function getAllCustomerDataFromCursorBasedPagination(
  cursor,
  data = [],
  payload
) {
  try {
    const response = await cursorBasedPaginationForCreatingSquareUserId(
      payload.limit,
      cursor
    );
    if (response && response.data) {
      // if (data.length === 8) {

      //   return data;
      // }
      // console.log("response", response.data.length);
      if (response.paging.hasMore === false) {
        data.push(...response.data);

    // console.log("data length", data.length);
        return data;
      }
        data.push(...response.data);
// console.log("response.paging.nextCursor",response.paging.nextCursor);
        return await getAllCustomerDataFromCursorBasedPagination(
          response.paging.nextCursor,
          data,
          payload
        );

    }
    return [];
  } catch (error) {
    return error;
  }
}

/**
 * Loops through paginated data
 * @returns All the data
 */
async function getAllData() {
  return await getAllCustomerDataFromCursorBasedPagination(undefined,[],{limit:100});
}

// Helper to await for setTimeout
const delay = async (millis) =>
  new Promise(resolve => setTimeout(resolve, millis));


module.exports = {
  cursorBasedPagination: cursorBasedPaginationForCreatingSquareUserId,
  getAllData: getAllData,
};

Implementing delete feature in ios apps: How to make sure deleting data doesn't mess up the reports

Sahil kashyap — Thu, 16 Feb 2023 18:54:28 +0000

For sql based data

If user has made no transaction. delete him,remove him.
But if he made purchase and his data(user_id) is saved on multiple tables,then

make deleted user table. whenever you delete make the obfuscated user data in this table. so the app,cms doesn't break. Also let your user know that for legal purposes some data needs to be retained.

For non sql.

Obfuscate the users data, and insert the user's data as key(eg owner) where the user id was used. Basically insert it as sub document.

Maybe this is not the best solution, for us it worked. how did you guys fixed it

convert api data in csv using postman and miller

Sahil kashyap — Thu, 16 Feb 2023 18:47:05 +0000

Aim: Json response to CSV

Solution:

Miller is a command-line tool for querying, shaping, and reformatting data files in various formats including CSV, TSV, JSON, and JSON Lines.

Miller Official website
Github: miller

mlr --j2c cut -f id,name,username,email,phone response.json>user.csv

if all the data is available in one response. save the response as a file via postman

Fastest way to transfer file within Ubuntu to Ubuntu or Mac to android on same network

Sahil kashyap — Fri, 21 Oct 2022 20:03:05 +0000

Install

http-server
npm install --global http-server

open CMD,type in this

http-server
it returns

Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://192.168.0.116:8080
Hit CTRL-C to stop the server

in other laptop open chrome,type this
http://192.168.0.116:8080

And start downloading

In Mac

Open terminal,Navigate to Downloads folder

sh cd Downloads

Type in this command

http-server ./ -p 1313

./ specifily will serve only the content in Download folder

-p is the port

Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:1313
  http://192.168.0.108:1313
Hit CTRL-C to stop the server

In Your android , open up chrome
Type in the url
http://192.168.0.108:1313

And select the file, it'll start downloading

Facebook Login React Js Node.js

Sahil kashyap — Fri, 17 Jun 2022 05:43:15 +0000

Problem: Use FB sdk in react.
Solution: Load FB SDK

Helper function (to load up the sdk)
React code
Node js function

// FBinit.js
const FB_APP_ID='xxxx';
export function initFacebookSdk() {
    return new Promise(resolve => {
      // wait for facebook sdk to initialize before starting the react app
      window.fbAsyncInit = function () {
        window.FB.init({
          appId: FB_APP_ID,
          xfbml: true,
          version: 'v14.0'
        });
        resolve()
      };   
    });
  }

  export function loadFacebookSDK(d, s, id){
    return new Promise(resolve => {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { return; }
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
      resolve()
    })
  }

export const FbLogin = () => {
  return new Promise( resolve => {
if (typeof window.FB == 'undefined') {
    loadFacebookSDK(document, "script", "facebook-jssdk");
    initFacebookSdk();}
    window.FB.login(response => {
      if (response.authResponse) {
        resolve(response);
      } else {
        resolve(response);
      }
    }, {
        scope: 'public_profile,email',
        enable_profile_selector: true,
        auth_type: 'rerequest',
        return_scopes: true
      });
  })
}
export const FbSignup = () => {
  return new Promise( resolve => {

    if (typeof window.FB == 'undefined') {
    loadFacebookSDK(document, "script", "facebook-jssdk");
    initFacebookSdk();}
    window.FB.login(res => {
        console.log("FbSignup FB.login",res);
        if (res.status === 'connected') {

            window.FB.api('/me', {fields: 'name,email,picture,birthday'}, (response) => {

                if (response.name) {
                    resolve({res,response});
                  } else {
                    resolve({res,response});
                  }
            });
        }

    }, {scope: 'user_birthday,public_profile,name,email'});
  })
}

export function FBlogout() {
    let FBstatus = window.FB.getLoginStatus();
    console.log("FBstatus",FBstatus);
    if (FBstatus.status === 'connected') { 

        window.FB.logout(function(response) {
            console.log("fb logout triggered",response);
          });
     }
}

loadFacebookSDK(document, "script", "facebook-jssdk");
    initFacebookSdk();

import { FacebookLoginButton } from "react-social-login-buttons";
import * as FBinit from '../../../utils/fbintit';
class LoginPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userId: "",
      password: "",
    };

    this.loginFB = this.loginFB.bind(this);
  }

  render() {
    return (
      <div>
        {" "}
        <FacebookLoginButton
          align={"center"}
          onClick={(e) => this.loginFB(e)}
        >
          <span>Sign in with Facebook</span>
        </FacebookLoginButton>
      </div>
    );
  }


  async loginFB(e){
    e.preventDefault();
    // console.log("loginFB");
    const data = await FBinit.FbLogin();
    // console.log("FBinit.FbLogin",data);
    if(data.authResponse==null){
      return;
    }
    this.props.dispatch(UserActions.fblogin({accessToken:data.authResponse.accessToken,userID:data.authResponse.userID}, response => {
      console.log("fb LOGIN_RESPONSE", response);
      if (response.status) {
        if(response.data.dob=="1000-12-01"){

          this.props.history.push('/birthday-wall');
          return;
        }
        this.props.history.push('/');
      } else {
        let error = response.data.message
          ? response.data.message
          : "Something went wrong, try again later!";


      }


    }))
  }

}

SignUp.js

import { FacebookLoginButton } from "react-social-login-buttons";
import * as FBinit from '../../../utils/fbintit';
class SignupPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userId: "",
      password: "",
    };

    this.signupFB = this.signupFB.bind(this);

  }

  render() {
    return (
      <div>
        {" "}
        <FacebookLoginButton
          align={"center"}
          onClick={(e) => this.signupFB(e)}
        >
          <span>Sign in with Google</span>
        </FacebookLoginButton>
      </div>
    );
  }


  async signupFB(e){
    console.log("signupFB");
    e.preventDefault();
    const data = await FBinit.FbLogin();
    // console.log("FBinit.FbLogin",data);
    if(data.authResponse==null){
      return;
    }

    this.props.dispatch(UserActions.FBsignup({accessToken:data.authResponse.accessToken,userID:data.authResponse.userID}, response => {

      if (response.status) {
        if(response.data.dob=="1000-12-01"){

          this.props.history.push('/birthday-wall');
          return;
        }
        this.props.history.push('/');
      } else {
        let error = response.data.message
          ? response.data.message
          : "Something went wrong, try again later!";


      }


    }))}
}

node.js

var mongoose = require("mongoose"),
Customer = mongoose.model("Customer"),
SocialLogin = Helpers.socialLogin;
const moment = require("moment");
var FBCustomerLogin = async function (req, res, next) {

  var customer = req.body;
  const {
    userID,
    accessToken,
  } = customer;
  let fbUrl = `https://graph.facebook.com/${userID}?fields=id,name,email&access_token=${accessToken}`;



  let fbAPiData = await SocialLogin.axiosGet(fbUrl);
  const {
    email
  } = fbAPiData;

  let result = Customer.findOne({
      email: email
    })
    .then(function (user) {

      try {
        var Guser = user.restrict();
        return res.status(200).json({
          user: Guser,
          token: jwt.signJwt(Guser)
        });


      } catch (e) {
        return res.status(400).json({
          message: "User not found, Please Signup!",
          error: e,
          status: 400
        });


      }


    })
};


var signUPFBCustomer = endPointHandler(async function (req) {

  var customer = req.body;
  const {
    userID,
    accessToken
  } = customer;
  let fbUrl = `https://graph.facebook.com/${userID}?fields=name,email,birthday,age_range&access_token=${accessToken}`;



  let fbAPiData = await SocialLogin.axiosGet(fbUrl);
  const {
    name,
    email,
    birthday
  } = fbAPiData;

  const neededKeys = ['name', 'email','birthday'];
  let fbcustomer = {};
  if(!neededKeys.every(key => Object.keys(fbAPiData).includes(key))){
    let keys = Object.keys(fbAPiData);
    let difference =  neededKeys.filter(x => !keys.includes(x)).toString();
    if(difference=='birthday'){

  fbcustomer.email = email;
  fbcustomer.name = {
    first: name,
    last: ""
  };

  fbcustomer.password = Math.random().toString(36).slice(2, 10);
      fbcustomer.dob = `1000-12-01`;
      fbcustomer.isEmailVerified = true;
      return stripe.createCustomer(fbcustomer)
      .then(result => {
        fbcustomer.stripeID = result.id
        return Customer.create(fbcustomer)
          .then(async function (user) {
            return user;
          })
          .then(function (u) {
            return Customer.findOne({
              _id: u._id
            })
          }) // We need a Customer instance for the then statement of tokenize to work. generateVeirficationEmail restricts the returned user and is not an instane of the Customer model.
          .then(Customer.tokenize);
      });



    }
    throw {
      status: 403,
      message: `Unable to read ${difference}`
    };
  }
  var birthdayFormated = moment(birthday, 'MM/DD/YYYY').format('YYYY-MM-DD');
  const age = moment().diff(birthdayFormated, 'years');
  const isLegal = (age >= 21);
  if (!isLegal) {
    throw {
      status: 403,
      message: "User is not over the age of 21 or Invalid Birthdate"
    };
  }

  fbcustomer.email = email;
  fbcustomer.name = {
    first: name,
    last: ""
  };

  fbcustomer.password = Math.random().toString(36).slice(2, 10);
  fbcustomer.dob = birthdayFormated;
  fbcustomer.isEmailVerified = true;

  return stripe.createCustomer(fbcustomer)
    .then(result => {
      fbcustomer.stripeID = result.id
      return Customer.create(fbcustomer)
        .then(async function (user) {
          return user;
        })
        .then(function (u) {
          return Customer.findOne({
            _id: u._id
          })
        }) // We need a Customer instance for the then statement of tokenize to work. generateVeirficationEmail restricts the returned user and is not an instane of the Customer model.
        .then(Customer.tokenize);
    });


});

Social login helper.js

//Social login
const axios = require('axios');
async function axiosGet(url) {
  try {
    const {data:response} = await axios.get(url) //use data destructuring to get data from the promise object
    return response;
  }
  catch (error) {
    console.log(error);
  }
}
module.exports = {
  axiosGet
}

Google identity service/Google Auth 2022 in React node

Sahil kashyap — Tue, 14 Jun 2022 19:38:27 +0000

Problem:

Beginning April 30th, 2022 new web applications must use the Google Identity Services library, existing web apps may continue using the Platform Library until the March 31, 2023 deprecation date.

Create a helper in react let's name it GoogleOauth with 3 function
- loginUser (uses popup)
- loginUser2 (uses one tap)
- SignUp

# Note

we have 2 login cuz Google One tap UI login has features#exponential_cool_down if user clicks on 'X',the One Tap will be disabled for a while. if user declines one tap login he'll see popup(loginUser)

// googleOauth.js

const id = "xxxxxx";
//generate this id(web oauth) from google console

const createScript = () => {
  // load the sdk
  const script = document.createElement("script");
  script.src = "https://accounts.google.com/gsi/client";
  script.async = true;
  script.onload = initGoogleGSI;
  document.body.appendChild(script);
};

createScript();
const initGoogleGSI = () => {
  console.log("initGoogleGSI SDK initialized");
};

export const loginUser = async () => {
  const client = window.google.accounts.oauth2.initTokenClient({
    client_id: id,
    scope: `profile email`,
    callback: "", // defined at request time
  });
  const tokenResponse = await new Promise((resolve, reject) => {
    try {
      // Settle this promise in the response callback for requestAccessToken()
      client.callback = (resp) => {
        if (resp.error !== undefined) {
          reject(resp);
        }

        // console.log("client resp",resp);
        resolve(resp);
      };
      // console.log("client",client);
      client.requestAccessToken({ prompt: "consent" });
    } catch (err) {
      console.log(err);
    }
  });
  return tokenResponse;
};
export const SignUpUser = async () => {
const SCOPES = ["https://www.googleapis.com/auth/user.birthday.read",
  "https://www.googleapis.com/auth/profile.agerange.read",
  "https://www.googleapis.com/auth/userinfo.profile",
  "https://www.googleapis.com/auth/userinfo.email",
  "https://www.googleapis.com/auth/user.gender.read",
].join(" ");
  const client = window.google.accounts.oauth2.initTokenClient({
    client_id: id,
    scope: SCOPES,
    callback: "", // defined at request time
  });
  const tokenResponse = await new Promise((resolve, reject) => {
    try {
      // Settle this promise in the response callback for requestAccessToken()
      client.callback = (resp) => {
        if (resp.error !== undefined) {
          reject(resp);
        }

        // console.log("client resp",resp);
        resolve(resp);
      };
      // console.log("client",client);
      client.requestAccessToken({ prompt: "consent" });
    } catch (err) {
      console.log(err);
    }
  });
  return tokenResponse;
};

export const loginUser2 = async () => {
  const tokenResponse = await new Promise((resolve, reject) => {
    try {
      const goog = window.google.accounts.id;
      const client = goog.initialize({
        client_id: id,
        scope: `profile email`,
        callback: handleCredentialResponse, // defined at request time
      });
      // Settle this promise in the response callback for requestAccessToken()
      function handleCredentialResponse(resp) {
        if (resp.error !== undefined) {
          reject(resp);
        }

        // console.log("client resp",resp);
        resolve(resp);
      }
      // console.log("client",client);
      window.google.accounts.id.prompt((notification) => {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          window.google.accounts.id.prompt();
          console.log("Prompt cancelled by user");
          resolve(loginUser());
        }
      });
    } catch (err) {
      console.log("loginUser2 err", err);
    }
  });
  return tokenResponse;
};

In your React Login page

import { GoogleLoginButton } from "react-social-login-buttons";
import * as GoogleInit from "../../../utils/googleOauth";
class LoginPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userId: "",
      password: "",
    };

    this.loginGoogle = this.loginGoogle.bind(this);

    this.GoogleSignInResponse = this.GoogleSignInResponse.bind(this);
  }

  render() {
    return (
      <div>
        {" "}
        <GoogleLoginButton
          align={"center"}
          onClick={(e) => this.loginGoogle(e)}
        >
          <span>Sign in with Google</span>
        </GoogleLoginButton>
      </div>
    );
  }

  async loginGoogle(e) {
    e.preventDefault();
    // console.log("loginGoogle");
    try {
      //our helper
      let data = await GoogleInit.loginUser2();

      // console.log("signInGoogle.signInGoogle",data);
      this.GoogleSignInResponse(data);
    } catch (error) {
      console.error(error);
    }
  }

  GoogleSignInResponse(value) {
    console.log("GoogleSignInResponse", value);
//send to backend (redux used here)
    this.props.dispatch(
      UserActions.googlelogin(value, (response) => {
        console.log("Response from DB", response);
        if (response.data.dob == "1000-12-01") {
          this.props.history.push("/birthday-wall");
          return;
        }
        if (response.status) {
          this.props.history.push("/");
        } else {
          let error = response.data.message
            ? response.data.message
            : "Something went wrong, try again later!";
          alert(error);
        }
      })
    );
  }
}

In sign up page

import { GoogleLoginButton } from "react-social-login-buttons";
import * as GoogleInit from "../../../utils/googleOauth";
class SignupPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userId: "",
      password: "",
    };

    this.signupGoogle = this.signupGoogle.bind(this);

    this.GoogleSignUpResponse = this.GoogleSignUpResponse.bind(this);
  }

  render() {
    return (
      <div>
        {" "}
        <GoogleLoginButton
          align={"center"}
          onClick={(e) => this.loginGoogle(e)}
        >
          <span>Sign in with Google</span>
        </GoogleLoginButton>
      </div>
    );
  }

  async signupGoogle(e) {
    e.preventDefault();
    // console.log("signupGoogle");
    try {
      let data = await GoogleInit.SignUpUser();

      // console.log("signInGoogle.signInGoogle",data);
      this.GoogleSignUpResponse(data);
    } catch (error) {
      console.error(error);
    }
  }
  GoogleSignUpResponse(value) {
    //send to backend
    this.props.dispatch(
      UserActions.Googlesignup(value, (response) => {
        console.log("DB_response", response);
        if (response.status) {
          if (response.data.dob == "1000-12-01") {
            this.props.history.push("/birthday-wall");
            return;
          }
          this.props.history.push("/");
        } else {
          let error;
          if (response.data.error.code == 11000) {
            error = "Data Already Exists";
          } else {
            error = response.data.message
              ? response.data.message
              : "Something went wrong, try again!";
          }

          alert(error);
        }
      })
    );
  }
}

Backend nodejs(function i used)


var mongoose = require("mongoose"),
Customer = mongoose.model("Customer"),
SocialLogin = Helpers.socialLogin;
const moment = require("moment");
function UserDataGoogle(response) {
    if(response.payload) {
        return response.payload;
    }
    return response;
}
async function getgoogleDOB(googlePeopleAPiData) {
    let dob;
    let agerange = await googlePeopleAPiData.ageRange;
    const {
        year,
        month,
        day
    } = googlePeopleAPiData.birthdays[0].date;
    dob = `${year}-${month}-${day}`;
    if(!year) {
        if(agerange == 'TWENTY_ONE_OR_OLDER') {
            dob = `1998-${month}-${day}`;
        } else {
            dob = false;
        }
    }
    return dob;
}

function checkForKeysinAPIdata(neededKeys, apidata) {
    return neededKeys.every(key => Object.keys(apidata).includes(key));
}

function createCustomerFromSocialMedia(customer) {
    return stripe.createCustomer(customer).then(result => {
        customer.stripeID = result.id
        return Customer.create(customer).then(async function(user) {
                return user;
            }).then(function(u) {
                return Customer.findOne({
                    _id: u._id
                })
            }) // We need a Customer instance for the then statement of tokenize to work. generateVeirficationEmail restricts the returned user and is not an instane of the Customer model.
            .then(Customer.tokenize);
    });
}
var signUPGoogleCustomer = endPointHandler(async function(req) {
    var customer = req.body;
    const {
        tokenId,
        googleId,
        access_token
    } = customer;
    let GoogleUserInfo = await SocialLogin.axiosGet(`https://www.googleapis.com/oauth2/v3/userinfo?access_token=${access_token}`);
    const {
        email_verified,
        email,
        given_name,
        family_name
    } = GoogleUserInfo;
    let googlePeopleAPiData = await SocialLogin.axiosGet(`https://people.googleapis.com/v1/people/me?personFields=birthdays,genders,age_range&access_token=${access_token}`);
    const neededKeys = ['birthdays', 'ageRange'];
    let googlecustomer = {};
    if(!checkForKeysinAPIdata(neededKeys, googlePeopleAPiData)) {
        let keys = Object.keys(googlePeopleAPiData);
        let difference = neededKeys.filter(x => !keys.includes(x)).toString();
        // throw {
        //   status: 403,
        //   message: `Unable to read ${difference}`
        // };
        //set default date in db if date,agerange not found
        googlecustomer.dob = `1000-12-01`;
    } else {
        let dob = await getgoogleDOB(googlePeopleAPiData);
        if(!dob) {
            throw {
                status: 403,
                message: "User is not over the age of 21 or Invalid Birthdate"
            };
        }
        googlecustomer.dob = dob;
    }
    googlecustomer.email = email;
    googlecustomer.name = {
        first: given_name,
        last: family_name
    };
    googlecustomer.isEmailVerified = email_verified;
    googlecustomer.password = Math.random().toString(36).slice(2, 10);
    return createCustomerFromSocialMedia(googlecustomer);
});
var GoogleCustomerLogin = async function(req, res, next) {
    var customer = req.body;
    const {
        credential, access_token
    } = customer;
    let decode;
    if(credential) {
        decode = Helpers.jwt.decodeJwt(credential);
    } else {
        decode = await SocialLogin.axiosGet(`https://www.googleapis.com/oauth2/v3/userinfo?access_token=${access_token}`);
    }
    const {
        email
    } = UserDataGoogle(decode);
    let result = Customer.findOne({
        email: email
    }).then(function(user) {
        try {
            var Guser = user.restrict();
            return res.status(200).json({
                user: Guser,
                token: jwt.signJwt(Guser)
            });
        } catch(e) {
            return res.status(400).json({
                message: "User not found, Please Signup!",
                error: e,
                status: 400
            });
        }
    })
};

Previously I was verifying the token I was recieving, I guess we don't have to use them

//Social login
const axios = require('axios');
var config = require("../config").dev.google;//google client id env
const {OAuth2Client} = require('google-auth-library');
const GoogleClient= new OAuth2Client(config.client_id);
async function axiosGet(url) {
  try {
    const {data:response} = await axios.get(url) //use data destructuring to get data from the promise object
    return response;
  }
  catch (error) {
    console.log(error);
  }
}
async function googleVerifyId(token) {
  const ticket = await GoogleClient.verifyIdToken({
      idToken: token,
      audience: config.client_id,  // Specify the CLIENT_ID of the app that accesses the backend
  });
  const payload = ticket.getPayload();
  const userid = payload['sub'];
  return payload;
}
async function googleTokenInfo(token) {
  // after acquiring an oAuth2Client...
const tokenInfo = await GoogleClient.getTokenInfo(token);
// console.log("tokeninfo",tokenInfo);
  return tokenInfo;
}
module.exports = {
  axiosGet,
  googleVerifyId,
  googleTokenInfo,
}

Youtube/Twitch like hovering video player,keeps playing across pages

Sahil kashyap — Mon, 23 May 2022 13:18:43 +0000

Problem: How to play a video across different pages of the Website. Similar to how youtube player keeps playing

Solution: Use vue with interiajs credit,

interiajs has persistent layout, persistent-layouts

Note: this uses laravel 8+

Github code: Click here