Customising the new user accounts login page on a Liquid storefront

Authentication & Access
1

I am currently working on a project that requires a full redesign of Shopify’s new authentication system UI (login, accounts, orders, etc) to be consistent with our brand. It seems like the only way to do this is to completely rebuild our Liquid storefront in Hydrogen. But rewriting our entire website is just not feasible, especially since we would require some third party app to replace the theme builder. I have done plenty of research to find a suitable approach, but I’m not sure if any of these will work.

We could add the functionality via the “Customer Account UI Extensions”. However, I don’t think this will allow us to rework the login pages.

I asked Shopify support to see if it is possible to migrate back to the old authentication system and use the templates/customers/* pages in Liquid, but they “do not support reverting to legacy accounts once migrated”. And using an external authentication system like Supabase may make it difficult to integrate with Liquid, and some of our other external services and apps we use.

The only other idea I have is to create a separate Hydrogen application that sits along side the Liquid storefront which handles authentication instead. This would allow us to customise the UI and UX to our exact needs, but I’m not sure if this is possible with the customer account API. It looks like that API is built to manage the customer auth tokens yourself, where as we want it to still be managed all with Shopify so it works with our current Liquid templates.

We could still handle the authentication tokens ourselves by storing all authentication state from the custom Hydrogen application as a cookie. This would mean we instead use Javascript to decide what elements are visible depending on the authentication state, but I suspect this may not be the most seamless solution as every page refresh would cause some layout shifts.

Has anyone attempted to do this, and has a good solution to this issue?

2

What you’re looking to do may be possible using an app proxy. I’m also curious if anyone in the community has other good approaches or recommendations here.

3

I finally got the time to work on this issue more. Sadly the only way to do this is to bring your own identity provider (IdP). I’m still working on implementing it on a dev storefront, so some of what I say could be completely wrong as I learn more about how it works. Hopefully it is helpful for anyone wants to give it a shot as well.

  • Once set up, the JWT token for the user would now be retrieved through your custom IdP, instead of through the Shop login. Thats it. Thankfully this isn’t like Copilot+Windows situation where Shopify depend entirely on Shop, and will break without it.
  • If you can choose an IdP that supports email logins the same way that Shop does, the transition should be seamless.
  • The default Shop checkout page uses your IdP for customer accounts, which is handy if you don’t want to re-create the checkout yourself. I’m not sure how to create a custom checkout page yet.

I am currently trying to set up Supabase since it is the only IdP that I have seen that allow you to implement your auth flow in your own self deployed, hand written web app. That means I can add extra routes, apart from it just acting as a login page.

But, I did run into an issue while setting it up (some oauth flow issue unrelated to this thread). You might have better luck using Auth0, but will cost a whole lot more in terms of monthly active users. Thankfully, you have the option to choose whatever IdP you want!

And now that I’m thinking about it, you can probably just host the login in your Liquid theme using the Supabase SDK. That would probably require webpack, vite, or another bundler, but it is doable.