Getting a refresh token?

[WilliamMayor]

Hey,

I'm building a frontend using SvelteKit, I've also got a FastAPI API (but I don't think that's relevant). I'm not using any of SvelteKit's SSR stuff for auth flows, it's all client-side.

I'm having to monkey around with the JS code to get it to work in a svelte-y way, it's going pretty well so far.

The issue I'm having is that I can't seem to get a refresh token along with my access token and id token.

Here's the code I'm using to generate the login URL:

async getLoginUrl() {
    const codeVerifier = await generateCodeVerifier();
    const codeChallenge = await getCodeChallenge(codeVerifier, "S256");
    auth.storage.setCodeVerifier(codeVerifier);

    return await auth.client.getAuthURL({
        redirectURI: "http://localhost:3000/auth/callback/",
        scope: ["openid", "offline"],
        codeChallenge,
        codeChallengeMethod: 'S256',
    });
}

The generateCodeVerifier and getCodeChallenge functions I've copied from the fief browser.js source and modified to work only in browser environments.

This logs the user in just fine, but only gives the access_token, no refresh_token (that I can see).

Because this is a public client I'm using the recommended PKCE flow. Is that having an impact here? I don't really understand PKCE at the moment, but I can dive into docs if that's what's needed.

I've seen this discussion: #30 which mentions asking for the offline scope and then using the refresh token, but I couldn't see anything in there that would help me out.

Thanks!

[frankie567]

Hello @WilliamMayor 👋 Welcome to Fief!

The valid scope name for getting a refresh token is offline_access, not offline; your message makes me realize that I was wrong in my previous answer in #30. I've edited it!

Try with this scope and tell me how it goes!

The generateCodeVerifier and getCodeChallenge functions I've copied from the fief browser.js source and modified to work only in browser environments.

Was there a specific issue with the one provided? They were not working?

[WilliamMayor]

Phew! I'm glad it's so easy :) I'll try that later and let you know if it works (I'm sure it will).

I copied the functions because I couldn't see how to import them into my svelte file. I'm not much of a JS dev, so maybe I'm missing something obvious. I tried:

import {generateCodeVerifier} from "@fief/fief";

But that didn't work. Nor could I import directly from the crypto module like you do in the browser.ts module.

[frankie567]

Ha, yes, JS is super painful regarding imports, especially if you need to support several environments and dialects.

After checking, it seems that I don't properly export the crypto module in the library, so you can't import it in your own. I'll fix that 👍

[frankie567]

Ok so now if you install the latest 0.9.2 version, you can do this:

import { crypto } from '@fief/fief'

async getLoginUrl() {
    const codeVerifier = await crypto.generateCodeVerifier();
    const codeChallenge = await crypto.getCodeChallenge(codeVerifier, "S256");
    // ...
}

Thank you for raising this point 😉

[WilliamMayor]

Thanks! The offline_access works, as does the new crypto import.

I'm really liking Fief! Is there anything I can do to help out? I'm a python dev mostly, but I dabble in JS.

[frankie567]

Great!

Well, any help is appreciated 😄

There are big features in the roadmap, but there also a lot of small things that could help:

• I would love to have a generic SMTP email provider, instead of just Postmark
• Since you're using Svelte, it could be interesting to have a specific guide in the docs for this; and maybe add some useful shortcuts into the library, like we do for React
• A proper integration for NodeJS/Express, like we do for Flask and FastAPI
• Improvements and clarifications in the docs are always appreciated
• ...

More simply, if you can just spread the word with fellow developers to raise awareness about Fief, that would be awesome!

[JustinGuese]

Hi! Would it be possible to get a quick rundown on how to implement fief in Svelte client side? I saw the example with react, but can't make much out of it coming mostly from a python fastapi backend...