https://github.com/wpcodevo/rust-yew-rs256-web-app

In this article, you will learn how to build a modern, single-page frontend application in Rust using the Yew.rs framework and WebAssembly.
https://github.com/wpcodevo/rust-yew-rs256-web-app

authentication jwt jwt-authentication rust tailwindcss trunk webassembly yew yew-framework yew-router yew-rust yewdux

Last synced: 15 days ago
JSON representation

In this article, you will learn how to build a modern, single-page frontend application in Rust using the Yew.rs framework and WebAssembly.

• Host: GitHub
• URL: https://github.com/wpcodevo/rust-yew-rs256-web-app
• Owner: wpcodevo
• Created: 2023-02-21T12:53:50.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2023-03-16T12:49:27.000Z (about 2 years ago)
• Last Synced: 2025-03-27T09:11:34.092Z (about 1 month ago)
• Topics: authentication, jwt, jwt-authentication, rust, tailwindcss, trunk, webassembly, yew, yew-framework, yew-router, yew-rust, yewdux
• Language: Rust
• Homepage: https://codevoweb.com/rust-yew-frontend-jwt-access-and-refresh-tokens/
• Size: 26.4 KB
• Stars: 6
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Rust and Yew.rs Frontend: JWT Access and Refresh Tokens

In this article, you will learn how to build a modern, single-page frontend application in Rust using the Yew.rs framework and WebAssembly. Our app will include essential JWT authentication features such as user registration, login, logout, restrict access to protected pages, and the ability to refresh access tokens in the background when they expire.

![Rust and Yew.rs Frontend: JWT Access and Refresh Tokens](https://codevoweb.com/wp-content/uploads/2023/03/Rust-and-Yew.rs-Frontend-JWT-Access-and-Refresh-Tokens.webp)

## Topics Covered

- Run the Yew.rs Frontend App Locally

- Run the Frontend App with a Backend API

- Bootstrap the Yew.rs Project

- Setup Tailwind CSS

- Define the API Request Functions

    - API Response Types

    - Create the API Requests

- State Management with the Yewdux Library

- Create Reusable Yew.rs Components

    - Create a Spinner Component

    - Create a Loading Button Component

    - Create a Notification Toast Component

    - Create a Form Input Component

    - Create a Header Component

    - Export the Components

- Implement the Authentication Flow

    - Account Registration Component

    - Account Login Component

    - Add Logout Logic to the Header Component

- Create the Remaining Page Components

    - Home Page

    - Profile Page

    - Export the Page Components

- Setup Routes For the Yew Components

- Render the Yew Application in the Main File

- Test the RS256 JWT Yew.rs Frontend App

    - Home Page

    - Create a New Account

    - Sign Into the Yew App

    - View Account Credentials

Read the entire article here: [https://codevoweb.com/rust-yew-frontend-jwt-access-and-refresh-tokens/](https://codevoweb.com/rust-yew-frontend-jwt-access-and-refresh-tokens/)