How I implemented login with logify in my existing project

Initially my project has a simple counter.

Now I want to show this screen after login only.

**Step 1: Get a Domain Key from Logify
Follow this article How to Get a Domain Key to get your Domain Key if you do not already have it.

Step 2: Update React Project
Install node module in your existing project
npm install react-logify

Create .env file

Paste REACT_APP_LOGIFY_DOMAINKEY = YOUR_DOMAIN_KEY

Step 3: Update code in App

import React from 'react'
import {useLogify} from 'react-logify';
import Counter from './components/CounterApp'

export const App = () =>{
    const { user, onLogin, onLogout } = useLogify();

    return <>
        {!user.id && <center><button onClick={onLogin}>Signup / Login</button></center>}
        {user.id && 
            <>
                <center>
                    {user.name}
                    <img alt='' src={user.pic} style={{width:48,borderRadius:'50%',margin:'0 10px'}}/>
                    <button onClick={onLogout}>Logout</button>
                </center>
                <Counter/>
            </>
        }
    </>
}

Run npm start in terminal

After logout, I can see Login/Signup button

If anybody wants to see the counter page, he has to login

Resources

• Demo
• GitHub

Comments

[Tanishq Singla]

Seems like you're trying to make a series, there’s a built-in way for folks to link up posts in a series. If you’re interested, you can learn more about how to use our series feature here.

More details in the editor guide!