Introduction
Overview of the Project
Objective: I am developing an innovative application that integrates Artificial Intelligence (AI) and Blockchain technology. This combination aims to leverage the strengths of both fields, potentially offering enhanced security, transparency, and intelligent functionalities.Current Progress
Web Platform Implementation: I have successfully built a web platform using Next.js, which serves as both the frontend and backend. Next.js is a popular React framework that enables server-side rendering and static site generation, making it suitable for building dynamic web applications.
Desktop Application Development: The goal is to create a desktop application that replicates the functionality of the web platform and operates on Linux. To achieve this, you selected the Electron framework, which allows for the development of cross-platform desktop applications using web technologies.
Main Tech Stacks and Important Points
Database Synchronization: By using the web platform's backend, I ensure that the desktop application can seamlessly synchronize data with the web platform. This is crucial for maintaining consistency across platforms, especially when users interact with both the web and desktop versions of the app.
Electron Forge and React.js: I chose Electron Forge to streamline the setup and packaging of my Electron app, while React.js provides a robust library for building user interfaces. Both frameworks are based on TypeScript, which adds static typing to JavaScript, enhancing code quality and maintainability.
Authentication Providers: I have integrated multiple third-party authentication options, including:
- Discord
- Google Console
- Wallet
These authentication methods are managed by NextAuth, a flexible authentication solution for Next.js applications that simplifies the process of implementing secure login mechanisms.
Challenges and Solutions
- Opening the Web Platform
This line of code opens the specified URL in the user's default web browser.
await shell.openExternal(url);
The URL must include the type of authentication request. You have structured it as: serverUrl + '/login?from=' + redirectURL;
Here, redirectURL must contain the protocol (e.g., protocol://localhost:300) to ensure that the backend can recognize the source of the request. This is essential for routing the authentication flow correctly.
Reopening the Desktop App and Retrieving Authorization Information
- Parsing the Redirect URL:
When the user is redirected back to the desktop app after authentication, I need to parse the URL to extract the necessary information. The code snippet for this is:const redirectUrl = new URL(protocol://localhost:3001/callback?code=${jwtToken}, nextUrl);
This constructs a new URL that includes the JWT token (or other identifiers) needed to authenticate the user. - Handling Second-Instance Events:
In Electron, when a user tries to open a second instance of the application, you can handle this with the second-instance event. On macOS, this is often captured as the open-url event. This allows you to receive the redirected URL from the web platform.
When this event occurs, you can extract the redirected URL, which should contain a unique identifier (like a user ID) that allows you to retrieve user-specific data. - Data Storage:
After obtaining the unique ID from the redirected URL, you can query your database to fetch the user's information. Once retrieved, you can store this data using Electron Store, a simple and lightweight storage solution for Electron applications. This ensures that user data is accessible within the desktop app.
- Parsing the Redirect URL:
Conclusion
My article aims to share insights and solutions for developers facing similar challenges in implementing third-party login functionalities in Electron applications. By detailing my approach, I hope to assist others in navigating the complexities of integrating web-based authentication into desktop environments, particularly when using modern frameworks and technologies.