react-oauth-ninja

Simple React package for Google OAuth

Installation

npm install react-oauth-ninja

Usage

Import package to yor react app

import {GoogleButton} from 'react-oauth-ninja';

Use package with your credentials

import {GoogleButton} from 'react-oauth-ninja';

const Login=()=>{
    return(
        <div>
            <GoogleButton 
                client_id='***********************.apps.googleusercontent.com'

                redirect_uri='http://127.0.0.1:5000/oauth/google'

                styles={{width:'300px'}}
            />
        </div>
    )
}

Customization Options

You can customize the button using the following options as props

1. styles - An object for styling the button
2. text - An object for changing and styling the text on the button.
3. gImg - An object for using a different image for the logo and styling it.

Options Examples

styles

Use styles prop to style the button size, shape, color, etc

import {GoogleButton} from 'react-oauth-ninja';

const Login=()=>{
    return(
        <div>
            <GoogleButton 
                client_id='***********************.apps.googleusercontent.com'
                redirect_uri='http://127.0.0.1:5000/oauth/google'
                styles={{
                    width:'250px',
                    backgroundColor:'#85C3E9'
                }}

            />
        </div>
    )
}

text

Use text prop to customize the value and style of text in the button

import {GoogleButton} from 'react-oauth-ninja';

const Login=()=>{
    return(
        <div>
            <GoogleButton 
                client_id='***********************.apps.googleusercontent.com'

                redirect_uri='http://127.0.0.1:5000/oauth/google'
              
                
                text={{
                    value:'Proceed with Google',
                    color:'#BD87FB',
                    fontWeight:'500',
                    fontSize:'20px'
                    }}

            />
        </div>
    )
}

gImg

Use gImg prop to change the G logo src and its size. The default is the Google logo

import {GoogleButton} from 'react-oauth-ninja';
import {alternativeImg} from "./Images/google-button.png"

const Login=()=>{
    return(
        <div>
            <GoogleButton 
                client_id='***********************.apps.googleusercontent.com'

                redirect_uri='http://127.0.0.1:5000/oauth/google'
              
                
                gImg={{
                    src:{alternativeImg},
                    width:'40px'
                    }}

            />
        </div>
    )
}