David Sling

Almost all applications need modals. The usual approach to implementing them requires a lot of state management. But this approach simplifies the process. Imagine al you have to do to open a modal is:

Well, That’s what we are going to do. Firstly, we are going to create a context like this:

Now let’s wrap our Provider around our App like we do for any Context.

Tada!! Now you can use the wonderful hook you created to just open and close modals like this:



As React developers, we use hooks all the time. So instead of calling functions like localStorage.getItem() and localStorage.setItem all the time, we can create a custom hook like this:

Implementing this hook in your code is as simple as:

const [state, setState] = useLocalStorage("keyIdentifier", "defaultValue")// Amd use the variables just like you use variables of an useState return



Combining the best dev tools of the top tech giants!

Let’s jump right into it.

npx create-react-app <project-name>
npm i firebase


Create a file: src/services/auth/index.js

Google Auth

Create a file: src/services/auth/google.js

Phone Auth

Create a file: src/services/auth/phone.js

React Component to Sign in with Google:

React Component to Sign in with OTP:

Thanks for Reading ❤️