Implemented: app bridge login flow(#429)

[ymaheshwari1]

Related Issues

#429

Referenced PR: #430

Short Description and Why It's Useful

Screenshots of Visual Changes before/after (If There Are Any)

Is the changes contains any breaking change?

If there are any breaking change include those in the release notes file

• Yes
• No

Contribution and Currently Important Rules Acceptance

• I read and followed contribution rules

[gemini-code-assist]

Summary of Changes

Hello @ymaheshwari1, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces comprehensive support for applications embedded within the Shopify platform, specifically addressing the login and authentication process. By integrating the Shopify App Bridge, the application can now securely authenticate users and access relevant Shopify context (like POS location or user details) when running inside the Shopify Admin or POS. This ensures a more native and integrated experience for users of embedded apps, streamlining their workflow and leveraging Shopify's built-in capabilities.

Highlights

• Shopify App Bridge Integration: Implemented the Shopify App Bridge login flow to support applications embedded within the Shopify Admin or POS, enabling seamless authentication and interaction with the Shopify ecosystem.
• Dependency Updates: Updated the @hotwax/oms-api package to version 1.26.0 and added new dependencies: @shopify/app-bridge and @shopify/app-bridge-utils, along with their transitive dependencies base64url and web-vitals.
• Enhanced Login Logic: Modified the DxpLogin.vue component to detect embedded Shopify environments and utilize the Shopify App Bridge for authentication, including fetching session tokens and user/location details from the app state.
• New Utility Functions: Introduced createShopifyAppBridge, getSessionTokenFromShopify, and openPosScanner utility functions to manage App Bridge initialization, session token retrieval, and interaction with the Shopify POS scanner.
• Auth Store Update: The authentication store (auth.ts) now includes a shopifyAppBridge property to store the initialized App Bridge instance, facilitating its use across the application.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request implements the Shopify App Bridge login flow, which is a significant feature. The changes correctly differentiate between embedded and non-embedded app contexts. My review highlights a couple of critical issues regarding unsafe parsing of environment variables that could lead to runtime crashes. I've also identified the use of a deprecated Shopify package and suggest migrating away from it. Other comments focus on improving code clarity and adhering to async/await best practices.