Install the client¶
The recommended way to install the client is to use
<script src="https://unpkg.com/@fief/fief/build/index.umd.js"></script> <!-- (1)! --> <script> console.log(fief); // Module is available globally under the `fief` variable </script>
This will always load the latest version
You should pin the version to avoid problems when we update the client and improve the loading time.
For example, to load the version
This is for you if...
- You want to handle all the OAuth authentication in the browser.
- Make sure your Fief Client is Public.
- Allow the following Redirect URI on your Fief Client:
- Install http-server, a simple Node.js HTTP server:
npm i --global http-server
index.html: it'll show if the user is logged in or not, and display a Login button.
callback.html: the page Fief will redirect the user to after a successful login to complete the OAuth authentication.
Let's see the first one:
HTML block for when the user is not logged in
It simply contains a generic title and a login button.
HTML block for when the user is logged in
We greet the logged in user with their email address and show them a logout button.
Fief client instantiation
Notice here that we omit the Client Secret. Indeed, the secret can't be kept safe in the browser: the end-user can easily find it in the source code.
That's why we set the Fief Client as Public: we allow it to make authentication requests without the Client Secret.
Fief helper for the browser
This is the helper doing the tedious work for you in the browser. All it needs is an instance of the Fief client.
Under the hood,
FiefAuthwill store the user session data on the browser SessionStorage. This is how we'll maintain the logged-in state of the user during its visit.
When the login button is clicked, redirect to Fief login page
We simply add an event listener on the button to start the authorization process when it's clicked.
We use the
FiefAuthhelper for this. All it needs is the redirect URL where the user will be redirected after a successful authentication on Fief: the
Under the hood,
FiefAuthtakes care of generating a PKCE code challenge for maximum security!
When the logout button is clicked, clear session and redirect to Fief logout page
We simply add an event listener on the button to logout the user.
FiefAuthhelper takes care of clearing the local session and redirect to the Fief logout page so that the session on Fief's side can also be cleared.
All it needs is the redirect URL where the user will be redirected after a successful logout. Here, we go back to the
Get user information in session
FiefAuthallows to retrieve the user information stored in session, if any.
User information is available
The user is logged in 👍 We can show the right HTML block and fill the user email to greet them properly.
User information is not available
The user is not logged in 😔 We can show the right HTML block with the login button.
FiefAuth helper, which takes care of storing the session in the browser and authenticating the client with PKCE.
Let's now see the
This doesn't change
We once again instantiate a Fief client and the browser helper.
We call the
This method takes care of everything: retrieving the authorization code in the query parameters, exchanging it with a fresh access token and save it in the browser session.
Once the promise is resolved, all we have to do is to redirect back to the
That's it! Assuming you have both files in a directory named
app-directory, you can run this application using
It'll make it available on http://localhost:8080. The first time you open it, you'll be logged out:
If you click on the Login button, you'll be redirected to Fief to authenticate. Once done, you'll be redirected to your application and should be properly logged in:
You can also try the Logout button to see how the session is cleared.
Call an API with an access token¶
In most cases, you'll have an API backend from which you can read or write data to display to the user in your web application.
To secure your API, you can make it require a valid Fief access token, so we are sure the call is made from an authenticated user. This is what we show for example in the FastAPI or Flask API examples.
Authorization header of your request.
When a user is authenticated, you can get the current access token using the
fiefAuth.getTokenInfo method. We show below an example of an HTTP request made to your backend using