Xumm-oauth2-pkce 在本地主机上工作，当我部署到服务器时停止

Question

I am slowly loosing my mind on this issue, I want to do basic XUMM wallet signIn on mobile, it works perfectly in local environment, but the moment I am deploying to the server, it stops working.

Here is the code

import "./App.css";
import { XummPkce } from "xumm-oauth2-pkce";

function App() {
  const xumm = new XummPkce(my-api);

  // Xumm events start
  async function connect() {
    xumm.authorize().catch((e) => console.log("e", e));
  }

  xumm.on("error", (error) => {
    console.log("error", error);
  });

  xumm.on("success", async () => {
    const state = await xumm.state();
    console.log("success");
    console.log(state.me.account);
    // setWalletAddres(state.me.account);
  });

  xumm.on("retrieved", async () => {
    const state = await xumm.state();
    console.log("retrieved");
    console.log(state.me.account);
    // setWalletAddres(state.me.account);
  });
  //Xumm events end

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={connect}> Test </button>
      </header>
    </div>
  );
}

export default App;

I've noticed that when I am opening from the website, the console gives me 3 lines:

Xumm OAuth2 PKCE Authorization Code Flow lib.

Remember JWT

XummPkce attached to window

But when I open on localhost, I get 4 lines, 3 from the above, plus:

XUMM SDK: Running in browser

Any help will be highly appreciated as I am slowly going crazy.

Answer 1

Based on your message I get the idea you're testing on mobile and expecting the redirect?

Can you please check this example: https://oauth2-pkce-demo.xumm.dev/jsmodule

The source code of that page is very clean, and works for mobile redirect and for desktop.

The success/retrieved event handlers trigger on redirect after signing on mobile as well.

Another thing to check: you mention you're running this on your server (possibly server side rendered?) . Please make sure the Xumm SDK must run on the client side. If somehow a build results in for example the code trying to run on the backend instead of frontend, it won't work.

To force the Xumm code running on the client side, you can refer to window.xumm instead of just xumm .

---

Edit (re: reply comment)

It is able to deal with a new tab, but if the tab is in a different browser, or for example you leave from an embedded browser (social media app, etc.) and then return to your stock browser it won't work.

The PKCE flow relies on security params stored in your local/session storage. You could try the Implicit flow, by adding this option to the constructor:

{ implicit: true }

(as second argument to the constructor).

If that still doesn't work: did you check my suggestions:

1. server side rendered (?)
2. try CDN in template (head) & refer to window.xumm?

Answer 2

If anybody is having the same issue, update your xumm-oauth2-pkce to 2.6.0. That fixed my issue.

Another solution if you don't want to update, is to put CDN to xumm-oauth2-pkce to (head) in your index.html in public folder and listening to the xumm events in the same file.