Introducing cookieless authentication beta with App Bridge

Retired Boards Appdev Tools
120

Hi,
I am trying to figure out how to change my existing apps to use session tokens.

I think I should use getSessionToken(app) where “app” is the app bridge.

I am able to get an instance of the app bridge, but calling functions on the app bridge never seems to terminate - what am I doing wrong?
Please note that I have checked that the “App url” of the app configuration matches the localOrigin of the app bridge, and I run the application locally using ngrok, and it is an embedded app.

The _app.js code is:

import App from 'next/app'
import Head from 'next/head'
import { AppProvider } from '@shopify/polaris'
import { Provider } from '@shopify/app-bridge-react'
import '@shopify/polaris/styles.css'
import translations from '@shopify/polaris/locales/da.json'

class ShopifyApp extends App {
  state = {
    //Mocking successfull OAuth
    authenticated: true,
  }

  getContent(){
    if (this.state.authenticated){
      const { Component, pageProps } = this.props
      
      //Shop hardcoded in order to simplify example
      const config = { apiKey: SHOPIFY_APP_KEY, shopOrigin: 'your-test-shop', forceRedirect: true }
      return (
        
      )
    }else{
      return (
        

Not authenticated

      )
    }
  }

  render() {
    return (
      
    )
  }
}

export default ShopifyApp

The index.js code is:

import { Heading } from '@shopify/polaris'
import { useAppBridge } from '@shopify/app-bridge-react'
import { getSessionToken  } from '@shopify/app-bridge-utils'

export default function Index(props) {
  const app = useAppBridge()
  //Check that app.localOrigin matches the "App url" defined in the app configuration?
  console.log('Use app bridge app:', app)

  //Why is neither the "then" nor the "catch" clause for getState executed?
  app.getState()
    .then((state) => console.log('state: ' + state))
    .catch((err) => console.log('state error ' + err))

  //Why is neither the "then" nor the "catch" clause for getSessionToken executed?
  getSessionToken(app)
    .then((result) => console.log('token ' + result))
    .catch((err) => console.log('token err' + err))
  
  return 
}

I am a frontend rookie, so my apologies in advance if I missed something basic.

Thanks,
-Louise