Usage with Ionic Capacitor

[leo-petrucci]

Question 💬

This isn't as much of a question as more of a list of findings/tutorial on how to get this (kind-of) working, it's already been done for React Native #569 so hopefully it's okay for me to post this.

---

The big issue I found while implementing this is how Android's Browser (which uses Chrome Custom Tabs) handles cookies.

Using the built in browser didn't work

Initially I was hoping I'd be able to simply open the Browser, log-in from there and then be sent back to my app with my cookies set. Any cookie saved within Chrome Custom Tabs will be saved on the systems' browser and since Capacitor does not share cookies with Chrome, that session will not be available in your Capacitor app.

Using the Rest API almost worked

The second thing I tried was to implement the oAuth flow entirely using the Rest API. My theory was to:

1. Generate an oAuth URL for my provider
2. Navigate there with Chrome Custom Tabs
3. Authorise the application
4. Have a callback to a deep-link within the app so that I could get access to the generated code
5. Manually post to the Next Auth callback endpoint to get session data

With the API I was able to get an oAuth url to authorise my app, however the issue appeared when redirecting after authorising.

As far as I can tell the /api/auth/signin/:provider endpoint will generate an oAuth URL that will always redirect to /api/auth/callback/:provider. The callbackURL option is just a page that Next Auth will redirect you after. So there is technically no way to redirect to the app with the code.

Workaround using the In-App Browser plugin

I was almost about to give up when I found the Cordova In App Browser plugin. In App Browser essentially opens another webview on top of your app, its cookies are shared with the Capacitor webview which means any authentication done here will also work in Capacitor.

After some trial and error I ended up getting the flow to work with the following code, added comments for clarity.

export const loginWithTwitter = async (callback?: () => void) => {
  // Fetches the csrf token, needed for all requests
  const { csrfToken }: { csrfToken: string } = await fetch(
    `${host}/api/auth/csrf`,
    {
      credentials: "include",
    }
  ).then((res) => {
    return res.json();
  });

  // Generate an oAuth url for the Twitter provider
  const { url }: { url: string } = await fetch(
    `${host}/api/auth/signin/twitter`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: new URLSearchParams({
        csrfToken,
        json: "true",
        // where next-auth will redirect us after auth
        callbackUrl: `${host}/redirect`,
      }),
      redirect: "follow",
      credentials: "include",
    }
  ).then((res) => res.json());

  const ref = InAppBrowser.create(
    url,
    "_blank",
    "location=yes,hidenavigationbuttons=yes,hideurlbar=yes,toolbarcolor=#f1f5f9"
  );

  if (ref) {
    /**
     * Here we check if we've been successfully redirected, if we have
     * we close the browser
     */
    ref!.on("loadstart").subscribe((e: any) => {
      const includesUrl = e.url.includes(`/redirect`);
      if (includesUrl) {
        ref.close();
      }
    });

    // The iap kind of sucks, on my Twitter login I had a bunch of elements that weren't loading
    // This injects some CSS to hide them
    ref!.on("loadstop").subscribe((e: any) => {
      if (e.url.includes(`/oauth2/authorize`)) {
        // Remove forever loading element
        ref.insertCSS({
          code: `
            div[role="progressbar"] {
              display: none;
            }
          `,
        });
      }
    });
  }
};

This doesn't look super legit, and since the IAP doesn't actually have access to any Cookies from Chrome, the user will be asked to login again before authorising the app.

That said, it does work. It's pretty much the only solution I could find short of reimplementing the entire flow.

Note: SessionProvider won't immediately have access to the session. The docs say to call getSession to force an update, but it didn't work for me. At the moment I'm forcing a page reload after login to make sure everything is synced properly.

Would love to know if anyone has better solutions, let me know if this has helped you.

How to reproduce ☕️

N/A

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[rickitan]

Great finding @creativiii are you still doing it this way? By any chance did you try with Google Sign in? Will this work for iOS as well?

Thanks!

[leo-petrucci]

I made an issue about it ages ago, but it never got any traction 😂

Glad you got it working!

[choutkamartin]

Yeah, Next Auth is not built so well when the API is on a different subdomain or domain. I understand that was never the use case, but it should have had this option from the start. Almost all API calls are relative to /api/, which is a headache as the app is trying to call itself, not the API that is running somewhere else. That's why SessionProvider has a basePath prop, which solves this for /api/auth/session requests, but it does not solve this problem for signOut, signIn methods and so on. 🙁

TLDR: There are 3-4 options:

1. Fork entire Next Auth and change what is needed
2. Write own signIn, signOut, SessionProvider and maybe a few more functions
3. Make a PR to Next Auth
4. Use server.url in Capacitor config, which I don't like, as loading entire app from my main site kind of loses the purpose of native app

[leo-petrucci]

I used react-query to re-implement the needed endpoints. Works quite well, hooks have invalidation and refetching features.

[BjoernRave]

@leo-petrucci could you share your solution using react-query?

[leo-petrucci]

@leo-petrucci could you share your solution using react-query?

I don't have the code, but it's really just creating hooks that get/post to the next-auth endpoints like session and logout.

[choutkamartin]

Example repository with comments on how to make Next Auth and Capacitor work together here: https://github.com/choutkamartin/next-auth-capacitor

[datteroandrea]

If you try the live web application the authentication is not working it says "you are not signed in", also the is no example on how to make this work in android via building an APK, if needed I can provide help but I don't know where to start.

[choutkamartin]

@datteroandrea Hi! Strangely, it looks like it stopped working after I deployed it to Vercel or I just messed up something as I was testing it locally most of the time.

I'm going to check what's wrong in the upcoming days. Then I'm gonna let you know

For building the APK you need to have basic Android Studio and Capacitor understanding, I linked this article in my repository as a starter point https://devdactic.com/nextjs-and-capacitor

[datteroandrea]

@choutkamartin perfect, thank you very much, if you need any help let me know!

[choutkamartin]

It was just a small error on my side when I was refactoring it, it should be working now. I will add a downloadable APK so you can test it without building via Android Studio. Edit: I added downloadable APK as a release. Check the repository. 🙂

[gunnerhowe]

So this method won't work with iOS? Only Android?

[phil-w]

I found some of this useful - thanks - but my own solution ended up somewhat different. It feels a bit like a lash up, but it seems to work and be reliable. I'll try to summarize it here anyway , in case it helps anyone else.

I started with Sveltekit and was loathe to adopt an Ionic approach. I was a bit surprised there wasn't an "off the shelf" solution for using OpenAuth across different platforms, but it seems there isn't. I played a lot with auth.js and also Lucia, which trades complexity for flexibility. I wanted to make auth.js work as I like simple.

I started with the standard "in app browser" but I couldn't make that work, and eventually found an unofficial version which worked straight away.

My problem was broadly to authenticate a sveltekit API using auth.js, such that I can authenticate using OpenAuth on web or mobile.

• I started by making my "sign in" and "sign out" controls and calling the standard auth.js stuff when on web, but when "on capacitor", I use my own local scripts.
• I modded my web "sign in" process so if you hit it from mobile, it directly starts the 3rd party sign in process, so you never see any of my UI in that case, just the 3rd party provider's.

Then, when the user wants to sign in on Capacitor...

1. My UI invokes the IAB with a path which is eg http://[domain]/auth/signin/microsoft-entra-id
2. The script hooks the IAB "url change" and "browser close" events.
3. The internet server takes the user directly to the 3rd party sign in process, with the browser url changing to the callback url when it's done.
4. That url is seen on the mobile, and the IAB closed. Then I extract the session token from the IAB cookies. That's quite a trick, but it works.

At this point I have a session token, and the internet server has a set of auth.js cookies, and my back end database server has a record of the session.

From here on I can use the session token in a http authorization header to access resources on the internet server: it's an authentication token for the API. If I want, I can use that same API to grab the same sort of "session data" auth.js would normally provide.