Capacitorjs Deep Link configured, in ios/android, How to deal with OAuth2 ?

[main heart]

Before i start , i use only web-sdk with capacitorjs. It builds, PWA, iOS and Android clients.
createEmailSession works fine with custom domain in PWA and also iOS and android clients. It sets cookies and session works without any error. -
--demo video 1--

createOAuth2Session works fine with only custom domain in PWA. Not in iOS/android clients.
Success link is going to app by deep linking configuration. (shown in demo video).

But the problem is in ios app, session is not started (cookies are not set) thats why i cant move further.
In the same time, it sets cookies into PWA, when i try to open PWA in browser in simulator, user logged in, but user not logged in ios app.
--demo video 2--

How can i handle or transfer/copy cookies from web app to mobile app ? Is there any way to transfer it? Any idea?

Related thread: 1145408157343039498

Capacitorjs Deep Link configured, in ios/android, OAuth2 cookies are not extracted!

[elder pivot]

How are you deep linking?

[main heart]

I just followed this instructions and it works well as i recorded in second video.

[elder pivot]

Interesting...sooo how do you set cookies in capacitor?

[main heart]

Actually appwrite response after createEmailSession / createOauthSession sets automatically in PWA. I did not do anything extra.

However deeplinking is just split url and navigate..

  async ngOnInit() {
    // Init Deep Link
    this.initDeepLink();
  }
  // Deep Link
  initDeepLink() {
    App.addListener('appUrlOpen', (event: URLOpenListenerEvent) => {
      this.zone.run(() => {
        const slug = event.url.split('app.languagexchange.net').pop();
        if (slug) {
          this.router.navigateByUrl(slug);
        }
      });
    });
  }

Copilot feedback.

[elder pivot]

So either you need to open the oauth url in the capacitor app context or you need to figure out how to set the cookie

[main heart]

In this example it handles incoming cookies in AppDelegate.swift
Does it work with only apple-sdk yeah ?

image ref: appwrite-docs

[main heart]

Ok, found a solution and it works! If you anyone encounter same/similar challenge, hope this thread gonna be helpful for the community.

Before i start i was exhausted about this issue how to solve it, it looks like a basic oauth2 integration but it made me crazy several days.

I was trying to extract cookies from browser and i realized something that cookies are set by appwrite httponly flag which is true. That means i never ever reach read fetch or overwrite by using javascript. Further info : https://stackoverflow.com/questions/14691654/set-a-cookie-to-httponly-via-javascript

So i was asking the question to copilot, i got this answer and enlightened my mind. It was a common challenge.

However appwrite uses only this following headers

Final question was that "Which header is better approach to handle with this situation ? What do you think about that ?" to AI and it said JWT!

Cool, i just create a session create jwt from browser session and pass through to mobile app page by using deeplink and then triggered set jwt

client: Client = new Client();

constructor(private http: HttpClient) {
  this.init();
}

init(): void {
  this.client
    .setEndpoint(environment.appwrite.APP_ENDPOINT) // Your API Endpoint
    .setProject(environment.appwrite.APP_PROJECT); // Your project ID
}

setJWT(jwt: string): void {
  this.client.setJWT(jwt);
}

Lastly, Keep in mind that this is not a cookie, so everytime you start mobile application, you are going to loose your jwt, that is why; when you get jwt from deeplink, do not forget to store with Capacitor.preferences Further info : https://capacitorjs.com/docs/apis/preferences

Capacitorjs Deep Link configured, in ios/android, How to deal with OAuth2 ?

[elder pivot]

Did you find these docs? https://capacitorjs.com/docs/apis/cookies

[cosmic tartan]

Just keep in mind that JWTs expire after 15 minutes

[main heart]

oh really??🤦‍♂️

[main heart]

Yeah of course but when i try to extract cookies with Capacitor.Cookies i cant access the session cookie that appwrite set because of that it has ‘httponly’ flag is true.

[elder pivot]

The important part was to figure out how to set the cookies

[main heart]

setting cookie is the most easiest thing. but i didn’t get your point. How can i extract that cookies? I tried lots of different scenarios from client and server side as well

[elder pivot]

To get the cookie, you'll redirect back to your app at this path:

/auth/oauth2/success

The cookie will be in the URL and you can extract the data like: https://github.com/appwrite/sdk-for-flutter/blob/cab0a1360fe3c70c27d00154ccf2d3dd6b56e813/lib/src/client_io.dart#L328

[main heart]

only this url has cookie but browser triggers this request. So after that request executed then it redirects to my success URL in location part which there is no cookies in headers. I can listen success url but not the first request.

[elder pivot]

You didn't redirect to this path

[main heart]

it is regular path of GET /account/sessions/oauth2/{provider}
1- https://db.languagexchange.net/v1/account/sessions/oauth2/google?success=https...
2- https://accounts.google.com/o/oauth2/v2/auth?client_id=10893...
3- https://db.languagexchange.net/v1/account/sessions/oauth2/callback/google/650750d...
4- THIS ONE HAS COOKIES https://db.languagexchange.net/v1/account/sessions/oauth2/google/redirect?project=6507...
5- my success url
https://app.languagexchange.net/login/oau...

i do 1st request and get 5th request, 2nd 3rd and 4th browser executes.

[elder pivot]

Your success url...make the path what I sent

[main heart]

as i understand, i use web-sdk so i dont redirect back to my app at this path of
/auth/oauth2/success

The response with cookies comes from account/sessions/oauth2/google/redirect

it is set here:
https://github.com/appwrite/appwrite/blob/86ce7a30040618c7b716cfc6611af078ecd3ee93/app/controllers/api/account.php#L796

[elder pivot]

What are you passing for the success url when calling the create oauth2 session method?

[main heart]

    this.api.account.createOAuth2Session(
      'facebook',
      environment.url.SUCCESS_OAUTH2,
      environment.url.FAILURE_OAUTH2
    );

environment.url.SUCCESS_OAUTH2 = "https://app.languagexchange.net/login/oauth2-callback"

[elder pivot]

The path you have is /login/oauth2-callback. Change it to what I sent you earlier

[elder pivot]

That's not what I sent you. Remove the v1

[main heart]

wow

but where did i know this url ? any link from the Docs or somewhere?

[elder pivot]

https://github.com/appwrite/appwrite/blob/86ce7a30040618c7b716cfc6611af078ecd3ee93/app/controllers/api/account.php#L781

This is used for mobile apps. Hence why I shared you the code for the flutter sdk

[main heart]

i really thank you to solve that one, i am really appreciate! It consumed pretty much of my time !!

Happy New Year 🎄

[agile vigil]

hi there @main heart happy you figured out your issue there....

What method did you use to create the session? Also, is this only possible if you use deeplinking and set your appwrite api url to your custom domain?

[main heart]

i did what steven told here, it was a headache for me more than a week 😉

[main heart]

it returns cookies to only this url

[agile vigil]

@xue thanks for your reply! did you use a custom url for your appwrite api calls? or just https://cloud.appwrite.io/v1

[agile vigil]

Oh now I understand what you mean @main heart! Worked for me as well I got back the key and secret at /auth/oauth2/success. Thankfully less than a week thanks to you folks

[cosmic tartan]

If your issue has been solved, you can mark this post as closed by adding "[SOLVED]" to the beginning of the title

[agile vigil]

@main heart did you se the cookie using the capacitor cookies api? #1189434348114550874 message trying that now but none of my subsequet api calls are working at the moment... #1189434348114550874 message

[main heart]

great question

let me check but i didnt use capacitor.storage in the particular one as i remember

[agile vigil]

trying this to test

App.addListener('appUrlOpen', async (event: URLOpenListenerEvent) => {
        const slug = event.url.split('/auth/oauth2/success').pop();
        if (slug) {
          
          const params = new URLSearchParams(slug);
          const key = params.get('key')
          const secret = params.get('secret')
          if (!secret || !key) return false
          await CapacitorCookies.setCookie({
            url: import.meta.env.VITE_APPWRITE_ENDPOINT,
            key,
            value: secret
          })
          await CapacitorCookies.setCookie({
            url: 'localhost',
            key,
            value: secret
          })
........

thank you so much for checking @main heart

[main heart]

  initDeepLink() {
    App.addListener('appUrlOpen', (event: URLOpenListenerEvent) => {
      this.zone.run(() => {
        console.log('appUrlOpen', event);
        const slug = event.url.split(environment.url.HOMEPAGE_URL).pop();
        console.log('slug: ', slug);
        // TODO; First redirect page to check auth status (auth/oauth2/..) and redirect to slug
        this.router.navigateByUrl(slug);
      });
    });
  }
}

ref

here i just redirect the url , no more

i set cookie in the related page.ts: ref

  async initValues() {
    // Get Selectors
    this.isLoggedIn$ = this.store.pipe(select(isLoggedInSelector));
    this.isLoading$ = this.store.pipe(select(isLoadingSelector));

    // Set Params
    const params = this.route.snapshot.queryParamMap;

    const cookieFallback = {};
    const key = params.get('key');
    const secret = params.get('secret');

    if (key) {
      cookieFallback[key] = secret;
    }

    const cookieValue = JSON.stringify(cookieFallback);

    if (
      cookieFallback &&
      Object.keys(cookieFallback).length !== 0 &&
      Capacitor.getPlatform() !== 'web'
    ) {
      localStorage.setItem('cookieFallback', cookieValue);
    }

    this.store.dispatch(isLoggedInAction());
  }

[agile vigil]

aaaah very cool. just local storage!

and then for making subsequent appwrite requests (ie account.getSession('current') ).... how did you set the session?

[main heart]

yea i did it like that but i think you can also use it Capacitor.Storage but didnt test it yet. it works like that but i will take a look here later on because of security reasons later on.

[main heart]

if you set cookieFallback (ofc you can try) account.getSession('current') works fine and gets current session.
but as i remember, its not recommended, take your own risks ok 🙂

[agile vigil]

aaah brilliant thank you. can confirm now that CapacitorCookies not working out of the box...for me at least

thanks again

[main heart]

possibly 🙂 np

[agile vigil]

Confirmed setting localStorage key works - not so much with the Capacitor.Preferences....