Docs for transitioning away from using a splash page?

[jagthedrummer]

Overview

I've found a few responses to various issues where someone says that a splash page isn't needed anymore, but I'm not finding any info about how to make the transition to a splash-page-free app. What exactly needs to be done to make that migration, and starting with which version? The CHANGELOG doesn't mention anything.

[scart88]

The id_token is a great start

[jagthedrummer]

@lizkenyon Can you or someone from Shopify offer some guidance here?

[uurcank]

@jagthedrummer id_token is available in the header so you can decrypt that to get all the information you need and auhenticate the user, which removes the need for any redirect so splash page should not be necessary.

If you have a different setup it may still make sense but redirects will only make your app slower.

[jagthedrummer]

@uurcank Can you point me to some actual documentation about how to use id_token and what bits of the demo code would be different by using it? The page linked above doesn't give any examples about how it fits into the bigger picture, and the pages that that page links to don't discuss id_token or idToken at all and are only about getAccessToken which is the splash-page-based approach.

[uurcank]

@jagthedrummer LLMs would your best bet. I do not think there is any documentation available for this. You just need to be familiar with JWT.

You can get the token from header and decrypt it to get the user and shop, and then authenticate in your app.

[jagthedrummer]

lol, I'm sure the LLMs are gonna do great with something that's not documented anywhere.

@uurcank Just curious, are you on the Shopify team that maintains this gem?

[uurcank]

@jagthedrummer I am not with Shopify team. It is easier than you might think. Just ask for a before action sample that can read the id_token from header and that will give you a boilerplate to work with.

That being said this gem should already be handling this for you so you may want to create a sample app and see how it works? Readme file should have all the details.

[jagthedrummer]

@uurcank The entire point of this issue is that the Readme file does not, in fact, have all the details and the sample app still demonstrates using a splash page. If I'm wrong about that please point to the relevant sections.

[uurcank]

When you create a sample app using this gem does it ever hit that splash page when you login from a store?

The code may still be there in an old sample but should no longer be needed as far as I know.

[jagthedrummer]

@uurcank Yes, the sample app still uses a splash page. Again, that's the ENTIRE POINT of this issue existing.

[uurcank]

I get your question but don't understand the issue. You can change routes and see if it works without that splash page in the sample app and see how user is still authenticated under AuthenticatedController. It should still work without it.

If it does not make sense you can write you custom before action and authenticate yourself, decrypting id token.

[bellef]

Hi @jagthedrummer,
What I did is far from perfect but it seems to work with the "new" way of doing things with a JWT.
I took a lot of code from different sources including this one.

class AuthenticatedController < ApplicationController
  include ShopifyApp::EnsureHasSession # Redirect to Shopify if no session

  # All my controllers inherit from this one
  #   missing here a before_action to prevent users from accessing outside of the Shopify context (TODO)
end

---

// I'm using InertiaJS with Vite so this file lives in `entrypoints/shopify_app.js`
import { router } from '@inertiajs/react'

const SESSION_TOKEN_REFRESH_INTERVAL = 2000 // Request a new token every 2s to ensure your tokens are always valid

// Look to retrieve the token every 2s to ensure it's always valid
document.addEventListener('DOMContentLoaded', async () => {
  keepRetrievingToken()
})

function keepRetrievingToken() {
  setInterval(() => {
    retrieveToken()
  }, SESSION_TOKEN_REFRESH_INTERVAL)
}

async function retrieveToken() {
  window.sessionToken = await shopify.idToken()
}

// Inertia middleware
// Add the token to the headers of the request
router.on('before', (event) => {
  const headers = event.detail.visit.headers || {}

  if (!headers['Authorization']) {
    headers['Authorization'] = `Bearer ${window.sessionToken}`
  }

  event.detail.visit.headers = headers
})

---

<%# layouts/embedded_app.html.erb #>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="shopify-api-key" content="<%= ShopifyApp.configuration.api_key %>" />

    <%# Ensure `shopify` global variable is available everywhere in the app %>
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
    <%= javascript_importmap_tags %>
    <%= csrf_meta_tags %>
    <%= vite_stylesheet_tag "application" %>
    <%= vite_react_refresh_tag %>
    <%= vite_client_tag %>
    <%= inertia_ssr_head %>
    <%= vite_javascript_tag 'application' %>
    <%= vite_javascript_tag "inertia.jsx" %>
    <%= vite_javascript_tag 'shopify_app' %>

    <link rel="preconnect" href="https://cdn.shopify.com/" />
    <link rel="stylesheet" href="https://cdn.shopify.com/static/fonts/inter/v4/styles.css" />
  </head>

  <body>
    <div class="app-wrapper">
      <div class="app-content">
        <main role="main">
          <%= yield %>
        </main>
      </div>
    </div>

    <%= content_tag(:div, nil, id: 'shopify-app-init', data: {
          api_key: ShopifyApp.configuration.api_key,
          shop_origin: @shop_origin || (@current_shopify_session.shop if @current_shopify_session),
          host: @host,
          debug: Rails.env.development?
        } ) %>

    <% if content_for?(:javascript) %>
      <div id="ContentForJavascript" data-turbo-temporary>
        <%= yield :javascript %>
      </div>
    <% end %>
  </body>
</html>

This way, when ShopifyApp::EnsureHasSession sees the Authorization header with the JWT token, it will provide with a current_shopify_session and current_shopify_domain.

Hope it helps ❤️