Biconomy Social Login - Next.js 13 Starter

Biconomy Social Auth is a project inspired by Nader Dabit's biconomy-social-auth repository (https://github.com/dabit3/biconomy-social-auth), repurposed for Next.js 13 App directory. Biconomy integration examples were initially targeted at plain React, which didn't provide straightforward instructions for frontend builds. The introduction of the new 'use client' directive in components and changes in Next.js config have created a hurdle for integrating Biconomy with Next.js 13, which is becoming a go-to for modern frontend development.

To navigate these challenges, I debugged the errors and ensured the code's compatibility with Next.js 13 App directory. This project, in its current state, could serve as a helpful guide in Biconomy's documentation, aiding other developers in a quick start.

Initially, I planned to incorporate the paymentmaster for gasless transactions. However, I encountered obstacles in the Polygon Mumbai dashboard, where it was impossible to fill the gas tank.

Despite this basic stage, it's my belief that this project can provide a valuable starting point for other developers. It carries potential for easy future expansion, providing a promising platform for future growth and development.

Building Biconomy Social Auth required a blend of Next.js, TypeScript, Biconomy's SDK, and React. The primary inspiration was from Nader Dabit's biconomy-social-auth repository, but I adapted it for Next.js 13 App directory, which is increasingly becoming the norm in modern frontend development.

The first step was overcoming the obstacles created by the lack of straightforward Biconomy integration examples for frontend builds beyond plain React. This challenge was particularly significant considering the new 'use client' directive in the components of Next.js 13.

Next.js was the foundation for this project, offering out-of-the-box features like routing and server-side rendering. TypeScript added strong typing, reducing potential runtime errors and improving the developer experience with features like auto-completion.

The Biconomy SDK was an integral part of this project, as it offered the social login and gasless transactions features. Biconomy's SDK is designed to streamline the experience of interacting with the blockchain, making it easier for users to log in with various social platforms and make transactions without having to worry about the gas fees.

One of the challenges during the development was ensuring that the code was compatible with Next.js 13's App directory. This involved going through a lot of trial and error and debugging. Notably, I had to set the webpack fallback for specific Node.js-specific modules like 'fs', 'net', 'tls' to 'false' in the next.config.js file to ensure successful builds.

As for the "hacky" part of the project, I had to use a ref (sdkRef) to retain the Social Login instance across re-renders of the component. Since React's useState and useEffect hooks were not sufficient to manage the state of the SDK instance correctly, using a ref was a convenient workaround to keep track of the instance.

Unfortunately, I couldn't integrate the paymentmaster for gasless transactions due to issues with filling the gas tank in the Polygon Mumbai dashboard. This remains a feature to be explored and implemented in the future.

Despite the challenges, the project provides a beneficial starting point for other developers looking to integrate Biconomy in their Next.js applications, and it's ready for future extensions.