DEV Community: Asim Mehmood

Social Login using Gmail in Nest JS

Asim Mehmood — Wed, 21 May 2025 10:38:13 +0000

l Login using Gmail in Nest JS

In this article, we will learn how to implement the social login feature in Nest js.

1- Installation

First of all, install the dependencies using following commands

For NPM

npm i passport passport-facebook passport-google-oauth20

For Yarn

yarn add passport passport-facebook passport-google-oauth20

2- Configuration

In the src directory of your project, create a folder named “Services”. Create a googleStrategy.ts file in services folder.

import { PassportStrategy } from '@nestjs/passport';
import { Strategy, VerifyCallback } from 'passport-google-oauth20';
import { config } from 'dotenv';
import { Injectable } from '@nestjs/common';

config();

@Injectable()
export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {

 constructor() {
   super({
       clientID: <your-clientID>,
       clientSecret: <your-clientSecret>,
       callbackURL: 'http://localhost:3000/google/redirect',
       scope: ['email', 'profile'],
     });
 }


 async validate (accessToken: string, refreshToken: string, profile: any, done: VerifyCallback): Promise<any> {
   const { name, emails, photos } = profile
   const user = {
     email: emails?.at(0).value,
     firstName: name?.givenName,
     lastName: name.familyName,
     picture: photos?.at(0).value,
     accessToken
   }
   done(null, user);
 }
}

2.1 — Go to console.google.com in your browser

2.2 — From side bar, go to API & Services -> Credentials

2.3 — Now, Click on create credentials and select OAuth Client ID

2.4 — After creating the client id and client secret, add it in your googleStrategy.ts file

3- Import googleStrategy in your module

import { GoogleStrategy } from './services/google.strategy';

@Module({
 ../
 providers: [GoogleStrategy],
})

export class AppModule { }

4- Setup your service file

src/app.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {

 googleLogin(req) {
   if (!req.user) {
     return 'No user from google'
   }

   return {
     message: 'User information from google',
     user: req.user
   }
 }
}

5- Setup your routes for social login using google

src/app.app.controller.ts

import { 
  Body, 
  Controller, 
  Get, 
  HttpStatus, 
  Post, 
  Req, 
  UseGuards
} from '@nestjs/common';
import { AppService } from './app.service';
import { AuthGuard } from '@nestjs/passport';

@Controller()
export class AppController {
 constructor(private readonly appService: AppService) {}

 @Get("auth/google")
 @UseGuards(AuthGuard('google'))
 async googleAuth(@Req() req) {}


 @Get('google/redirect')
 @UseGuards(AuthGuard('google'))
 googleAuthRedirect(@Req() req) {
   return this.appService.googleLogin(req)
 }
}

Now, you can login using google at following URL.

http://localhost:3000/auth/google

Congratulations, Now you have implemented social login using google in Nest JS.

Over the air (OTA) update using Revopush in react native

Asim Mehmood — Thu, 15 May 2025 10:47:43 +0000

In this article, we will learn what is over the air updates and how to configure and use over the air updates feature in react native app.

An OTA (Over-The-Air) update refers to the process of delivering and applying updates to your React Native application directly to users’ devices without requiring them to go through the traditional app store update process (i.e., Google Play Store or Apple App Store).

Instead of bundling all your JavaScript, assets (like images and fonts), and potentially native code into a new app binary that needs to be submitted, reviewed, and then downloaded by users from the app stores, an OTA update allows you to push changes to these elements directly to the installed app

1-Installation
First of all, you have to install you have to install the revopush package using following command

For NPM

npm i @revopush/react-native-code-push

For Yarn

yarn add @revopush/react-native-code-push

Now, configure the package according to the version of react native your app is using.

2 - Follow the instructions from the docs according to the variant

For configuration in IOS
https://github.com/revopush/react-native-code-push/blob/master/docs/setup-ios.md

For configuration in Android
https://github.com/revopush/react-native-code-push/blob/master/docs/setup-android.md

3 - Wrapping the App with Revopush

For Automatic updates checking and installation

let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };

let MyApp: () => {
  render(){
    return {
      <View>
      </View>
    }
  }
}

MyApp = codePush(codePushOptions)(MyApp);

For manual updates checking and installation

let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };

const MyApp = () => {
  const onButtonPress = () => {
    codePush.sync({
      updateDialog: true,
      installMode: codePush.InstallMode.IMMEDIATE
    });
  }
  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.onButtonPress}>
          <Text>Check for updates</Text>
        </TouchableOpacity>
       </View>
      )
   }
}

MyApp = codePush(codePushOptions)(MyApp);

3.1 - CodePush Options

checkFrequency

Controls when the app checks for updates.

codePush.CheckFrequency.MANUAL (you manually trigger check)
codePush.CheckFrequency.ON_APP_START (default)
codePush.CheckFrequency.ON_APP_RESUME

InstallMode

Controls when the update gets applied after download.

codePush.InstallMode.IMMEDIATE: Apply update right away (may reload app).
codePush.InstallMode.ON_NEXT_RESTART: Apply next time app is restarted.
codePush.InstallMode.ON_NEXT_RESUME: Apply when app resumes after going to background.
codePush.InstallMode.ON_NEXT_SUSPEND: Apply after system suspends the app.

Manual Methods

If you set checkFrequency: MANUAL, you can control everything programmatically:

codePush.sync({
  installMode: codePush.InstallMode.IMMEDIATE,
  updateDialog: true,
});

4 - Revopush CLI installation

Now, we have to install Revopush CLI to access and use Revopush using our terminal / CLI.

To install Revopush, use the following command

For NPM

npm install -g @revopush/code-push-cli

For Yarn

yarn add -g @revopush/code-push-cli

revopush login

You will be prompted to the browser with an access key. Copy the access key from browser and paste the key in the terminal from where you are trying to login.

Now, you are logged in.

Note: From browser,you can also access your revopush dashboard at this URL https://app.revopush.org/

To get a detailed information regarding revopush CLI, you can checkout the documentation

https://docs.revopush.org/cli/getting-started

Create an App on RevoPush

Now, create an app on revopush using your revopush dashboard or revopush CLI

For creating app using CLI, use the following command. Replace the appName with the name you want to create the app.

Command syntax: revopush app add <appName>
Command example: revopush app add MyAppIOS

Now, your app is created on revopush dashboard. You can verify by checking the applications tab in your dashboard.

Releasing updates using revopush

Now, you can release updates using the following commands

Command syntax: revopush release-react <appName> <platform ios/android>

Command example: revopush release-react MyApp android -d Production
Command example: revopush release-react MyApp ios -d Production

Congratulations, Now you have configured the over the air update feature in your react native app.