DEV Community: MonkeyScript

Google Authentication using Firebase in Next.js

MonkeyScript — Fri, 23 Sep 2022 13:28:13 +0000

Hellooo everyone,

I was recently developing a platform in Next.js and needed to incorporate Google authentication. The majority of the available guides, however, were out of date, contained errors, or relied on unnecessary dependencies. Anyway, I cracked it and decided that writing it down step by step would be helpful to others. The sole purpose of this article is to walk you through the simplest method of adding Google auth to your Next.js project using Firebase.

Before we begin, I’m assuming you already have a firebase account set up for your project. If this is not the case, please refer to the setup documentation. It’s quite simple. Simply start a new project and register your app. After that, you’ll be given a unique set of credentials. This can be found in your project settings and will look something like,

const firebaseConfig = {
  apiKey: "your api key",
  authDomain: "your credentials",
  projectId: "your credentials",
  storageBucket: "your credentials",
  messagingSenderId: "your credentials",
  appId: "your credentials"
};

Now that we have the Firebase project set up, let’s get started on the coding.

Step 1 : Creating a Next.js project

npx create-next-app _PROJECT_NAME_

Step 2 : Install the Firebase module

npm install firebase

The version I used was 9.9.4.

Step 3 : Enable Google sign-in method

Navigate to the authentication tab in your Firebase project. You will be able to see various sign-in methods that have been configured with the project. Add a new Google provider here.

Step 4 : Enable authentication in your project

Yes, this is the exciting part. Let’s keep things simple and keep all of the authentication logic in the _app.js file.

Let’s start by importing the firebase modules and adding our firebase credentials to the project.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const firebaseConfig = {
  apiKey: "your api key",
  authDomain: "your credentials",
  projectId: "your credentials",
  storageBucket: "your credentials",
  messagingSenderId: "your credentials",
  appId: "your credentials"
};

Let’s now start the Firebase service and enable the Google auth provider.

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });

We can now use the auth object to define our sign in and sign out functions.

const signIn = () => auth.signInWithPopup(provider);
const signOut = () => auth.signOut();

When you call the **signIn **function, a popup will appear from which you can select your Google account. And the **signOut **function logs you out and clears the session. Isn’t it too simple? ;)

We must now keep track of whether or not the user is logged in. This will remain a state variable.

const [user, setUser] = useState(null);

This object contains basic metadata about the logged in user, such as display name and email address.

We’ll then listen for auth changes from Firebase. This is required to check if the user is already logged in when you return or to update the state once you successfully login.

useEffect(() => {
  firebase.auth().onAuthStateChanged(async (user) => {
    setUser(user);
  });
}, []);

You can also include any additional logic here. Sending the JWT token to your backend, for example, to keep session data, etc.

I’ll just paste the entire _app.js code we’ve written so far for reference.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import { useEffect, useState } from "react";

// Firebase config
const firebaseConfig = {
  apiKey: "your api key",
  authDomain: "your credentials",
  projectId: "your credentials",
  storageBucket: "your credentials",
  messagingSenderId: "your credentials",
  appId: "your credentials"
};

// Initialize firebase and google provider
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });

// Sign in and sign out functins
const signIn = () => auth.signInWithPopup(provider);
const signOut = () => auth.signOut();

function MyApp({ Component, pageProps }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    firebase.auth().onAuthStateChanged(async (user) => {
      setUser(user);
    });
  }, []);

  return (
    <Component 
      {...pageProps} 
      user={user} 
      signIn={signIn} 
      signOut={signOut} 
    />
  );
}

export default MyApp;

Step 5 : Fire it up!

To test the authentication, add some simple logic to the index.js file.

export default function Home(props) {
  return (
    <div>
      {props.user ? (
        <>
          <span>Signed in as : {props.user.email}</span>
          <button onClick={props.signOut}>Sign Out</button>
        </>
      ) : (
        <button onClick={props.signIn}>Sign In</button>
      )}
    </div>
  );
}

Start the project and see the results.

npm run dev

That’s it!

You now have a Next.js project that uses Google authentication. If I missed anything, please let me know in the comments.

Cheers and happy coding!

Website Performance Checklist

MonkeyScript — Tue, 20 Oct 2020 11:29:09 +0000

The tolerance of people for poor experience is declining over time and most of them will bounce from your website if it doesn't load in the first few seconds. Below are a few measures that can increase the performance of your website.

1. Compress components with gzip

Include the following lines in your .htaccess file. Make sure your hosting service has compression support.

<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

2. Add expire headers (Browser caching)

Include the following lines in your .htaccess file. This will enable the caching of our page assets in browsers for the specified time interval.

<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresDefault "access 2 days"
</IfModule>

3. Avoid URL redirects

Include the following lines in your .htaccess file.

RewriteEngine On

RewriteCond %{HTTP_HOST} ^www.example.com [NC]
RewriteRule (.*)$ http://example.com/$1 [R=301,L]

4. Reduce DNS lookups

Built over time by domain authority and other factors.

5. Make fewer HTTP requests

Reduce the number of files i.e. combine CSS, js, etc.

6. Avoid empty src or href

Avoid <video poster="">, <script src=""> etc.

7. Minify HTML, CSS and JS

Minify all files thus reducing file size.

8. Specify image dimensions

Include the height and weight of images.

<img src="image.jpg" width="200" height="200" />

9. Avoid bad requests

Ensure all requests have a proper response and do not yield 404 or 410 status codes.

10. Defer parsing of JavaScript

Javascript parsing will block all other processes. Therefore a bulk code can slow down the rendering. Use the following code to delay the parsing.

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "example.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

Read the full list here.

Happy coding!

UI UX Designing for Cats

MonkeyScript — Tue, 20 Oct 2020 06:03:48 +0000

As we go into the last quarter of 2020, we can see some massive changes in the industry which are centered around UI UX. You can observe a surge in demand for UX designers. Wonder why? The tolerance of people for poor experience is declining over time and teams are now focusing on putting the customer first.

User experience has no clear cut definition to date. Broadly saying, it is how someone finds your app or website in terms of ease of use, accessibility, performance, etc. As a UI UX designer, you make or break a company's business.

"If I have a thousand ideas and only one turns out to be good I am satisfied." - Alfred Nobel

Your Role?

First of all, UX and UI are both different. UX deals with the psychology and mentality of people while UI is pure design skills. There are places where UX and UI designing are done by different individuals and there are also teams where it's a single person. As a designer, you will be responsible for understanding the problem what you are trying to solve and draft a meaningful prototype as the solution. A good level of creativity is required as your imagination will be the face of the solution. It is always important to include your teammates in the design process. Sometimes a small suggestion can bring a huge difference in how people interact with your product.

User-Centered Design

User-centered design or UCD is a design process that has gained popularity over the period. As the name sounds, the user and his opinions are always put first. It follows a basic rule, "constant improvement for the better." Let's break it down into four phases: Research, Concept, Design, and Test. This repeats as a loop with numerous iterations.

Research Phase

This is where you layout and understand the problem thoroughly. You need to interview the audience for whom you'll be targeting as customers. Make sure the questions are simple and the flow is structured. It is better to do a trial run on your teammates before going out to the real world. Sometimes there will be someone by the title, business analyst who does this job and understanding what customer wants. He/She will then give all the inferences and requirements as a requirement doc.

Concept Phase

You can start drafting the solution once you have a good understanding of the problem. Always keep your target audience in mind. Creating a product that is not practical or doesn't solve anything is just a waste of money and time. Create personas and stick them up to your wall. The objective of this phase is to understand the user journey, a path that will be followed by the user to achieve the desired goal within your app or website. An ideation workshop is optimal if you want to bring your team together. Start with paper as this will take so many iterations. Make as many variations as you can, discuss with others, and get their feedback. Once you reach some saturation level, Voila, you have the first functional wireframe with you.

Design Phase

This is where your graphic design skills step in. We're talking about colors, fonts, buttons, and all that brings your wireframe to life. Most large companies have a design language of their own. A design language is a set of consistent elements and rules like buttons, font specifications, etc. Material Design by Google, Fluent Design by Microsoft are popular design languages out there. There are a lot of tools, both offline and online such as Adobe XD, Figma which facilitates UI designing. Make sure you master at least one. Another key thing in UI design is responsiveness. Since the mobile internet started to kick in, people are looking for the same accessibility with their small devices like smartphones, tablets that they achieve on desktops. A UI designer can make or break a great wireframe. So UX and UI designers must be in sync in places where they are not the same person.

Test Phase

Once the first version of the product has been developed, start testing it with real people. Watch how people use it and trust me, you'll find it amusing. Ask questions about navigation, ease of use, accessibility. Deploy some analytics like Google Analytics or Crazy Egg and analyze your user's behavior. These results can show what you need to improve. It can be highlighting call-to-actions, removing unwanted imagery, or even changing the colors (do some research on color theory and how they are related to human mentality). From here, you are going back to the research phase for the next iteration.

UX UI designing is not something you can master in a single day. Push your creativity to the limits and you'll improve over time. Listen to podcasts, subscribe to newsletters, and keep up to date with design trends. You may want to check out this course on UI UX designing by Antony Conboy which is perfect for beginners.

Have a nice day!