curiousdrive/blazingchat

BlazingChat is a Blazor WebAssembly app developed by CuriousDrive for the community. This is a sample application for developers who are just getting started with Blazor.

What is BlazingChat?

BlazingChat is a Blazor WebAssembly app developed by CuriousDrive for the community. This is a sample application for developers who are just getting started with Blazor.

BlazingChat has code samples for Authentication, Logging, Virtualization ... and much more. The app is open source and running in production.

Check it out here https://www.blazingchat.com

How to run it?

• Install Visual Studio 2022.
• Clone repo https://github.com/CuriousDrive/BlazingChat.git on your machine.
• Open solution file src/BlazingChat.sln
• Make sure to select WebAPI & Client to run as multiple startup projects

• Press Cntrl + F5 to run the app. It should open the app in your default browser.
• Click on login. You should get logged in with email address [email protected]
• Or you can login with your Twitter or Facebook
• Congratulations!!! you are using BlazingChat.

How does it work?

The front-end is made using Blazor WebAssembly and the back-end is made using ASP.NET Core Web API + Entity Framework Core. SQLite is used to store the data. You can run this app on Windows, Mac or Linux operating systems. The repo is maintained episode by episode so that you can go back to particular episode and the code related to it.

How can I build it from scratch?

The best part about BlazingChat app is that it's been documented while it was getting built.

Please check out the videos below, if you want to learn how to build your own Blazor WebAssembly app from scratch.

Topic	Video Recording
Introduction/Full Course/Workshop - EP01	https://youtu.be/v6Mt8HKAWa0
Hello World from Windows/Linux - EP02	https://youtu.be/BajljUky-KA
Project Structure/Template - EP03	https://youtu.be/S-skkhzcMmo
Routing, NavigationManager & AdditionalAssemblies : EP04	https://youtu.be/86vyb4vDGTk
Debugging in VS Code, Chrome and Visual Studio : EP05	https://youtu.be/4c2vli5567A
Entity Framework Core - EP06	https://youtu.be/rACHqnkaORA
MVVM Architecture - EP07	https://youtu.be/dvgReCfPsvg
Dependency Injection in MVVM - EP08	https://youtu.be/bxpSa0ZmwtY
Using HttpClient in MVVM - EP09	https://youtu.be/To-GSKOac10
Open-source Project - EP10	https://youtu.be/6T-l-lt28rs
Custom Authentication - EP11	https://youtu.be/B9jKf-Dn0Yg
AuthenticationState - EP12	https://youtu.be/N8YoJRV19rw
Twitter Authentication/Login - EP13	https://youtu.be/TZSwbey58CM
Facebook Authentication - EP14	https://youtu.be/AoN-CzWJwa4
Google Authentication - EP15	https://youtu.be/4lYPhionIEo
Migrating from 3.1 to .NET 5 - EP16	https://youtu.be/kcihC-h69fE
CSS Isolation - EP17	https://youtu.be/0EqMxSm_49k
Uploading Files - EP18	https://youtu.be/sF6yhn2UJNs
Downloading Files : EP19	https://youtu.be/qUbbtcZZqaI
Virtualize Component - EP20	https://youtu.be/UtmAlX6U29k
JavaScript Isolation - EP21	https://youtu.be/tbNgLNZnNWM
Lazy-loading Assemblies - EP22	https://youtu.be/e_22VhPQJj0
Deploy to IIS(Internet Information System) - EP23	https://youtu.be/vV0zn91OZfc
Creating Chat Application Using SignalR - EP24	https://youtu.be/5VSUX6w5P8g
SignalR - Sending Messages to Specific Clients - EP25	https://youtu.be/SeQvP8_dVng
Cookie Expiration & API Authorization - EP26	https://youtu.be/QOFwpmjEW7g
Logging to Database using Custom Logger Provider - EP27	https://youtu.be/SmFsQJBbsO0
Global Exception Handling using CascadingValue - EP28	https://youtu.be/mxOYvu2MWFo
"Remember me" using Cookie Authentication - EP30	https://youtu.be/220FQbMKyrg
Dark/Light Theme Switch - EP31	https://youtu.be/5qRaUviEYIw
JWT Authorization - EP32	https://youtu.be/bu6F4oeYdzA
JWT For Facebook Authentication - EP33	https://youtu.be/bBvDQ9z1Xdw
Authorization using CascadingAuthenticationState & JWT - EP34	https://youtu.be/uthjcpJHzKo
Deploying Blazor + WebAPI using GitHub Actions(CI/CD) - EP35	https://youtu.be/m7DqtL0WIV0
Upgrade NET5 to NET6 in 8 minutes - EP36	https://youtu.be/qNPKnrSEr-Y
.NET6 : Program.cs Changes - EP37	https://youtu.be/iBBU0KC8EKw

Have any other questions?

If you have any questions on how this project is setup then you can reach out to us on below handles.

https://twitter.com/curious_drive
https://www.facebook.com/curiousdrive/
https://www.youtube.com/c/curiousdrive

Let us know how it goes.

blazingchat's Issues

Logging does not work when the user is not logged

It looks like we introduced an issue when we implement logging userinfo when exceptions occur.

Remove Radzen component library

Add all episode links in the README.md file

Currently, it only shows the link to the playlist. I think it will nice if I can add all the links so that people and connect to particular video properly.

Also let's map the source code folder too. Why not?

Please add UserId Column in Logs table

Currently we are not storing any user related data in the logs. It will be nice to know for which user which error happened.

Add a default profile picture if there is no picture for the user.

Currently it's not looking good. It will be nice have to have a default profile pic when user has not assigned any pictures

Add register/login instruction on the landing page

Currently, people are registering with fake email address because they don't know the authorization process for most of the people.

Make dark theme work for JWT authentication

Loading theme for the user when user logs in or reloads the page stopped working after integrating JWT authorization.
Need to fix this.

Adding a console line to indicate that application has started

Question about hosting model

First of all, thanks for this great resource!

I hope this is the right place to ask a question about your app.

The app is separated to WebApi and Client part. When one creates the default blazor template with VS, apps (api and client) are somehow glued together. When you run the api part it will also start (host) the client. Basically you can run the app with one dotnet run command. On the other hand, Blazing chat needs to run the parts separately. Also the hosting "model" on azure has 2 resources (static web app and web app), but it is possible to run whole app in just the web app resource... What are the reasons for that? I have few ideas:

• For the mobile app, you would need to separate the app anyway. Maybe not, but it feels wrong to have one of the clients (the blazor web app) glued to web api which will be used by other client apps (droid, ios)...
• The development is kind of faster. For example when using dotnet watch run, it scans and rebuilds only the appropriate part of the app (client or api).
• It could deploy only the part that is actually updated. But when you edit something in client app it will trigger both gh actions, thus redeploy the web api unnecessary. Is there an option to deploy just the client? (or am I mistaken here?)
• Anything else??

Thank you!

JWT Authorization for Google & Twitter Login

Just like how we added JWT authorization for Facebook. We need to add same for Google & Twitter login

"Sorry, there's nothing at this address." when clicking on the Sign in with Twitter, Facebook or Google buttons

Hi,

Ik just downloaded and tried to run the BlazingChat solution "Episode_15".
When running the website I navigate to "Profile" and click the Sign in with "Twitter", "Google" or "Facebook" button.
This always redirects me to the page not found page.

Is there some routing missing for the server controllers?

Kind regards,

Jan

Add "Activate Users" functionality

Basically I am adding this feature to explain folks how they use "claim-based authorization" in Blazor WebAssembly application.

App does not work when JWT is expired and still in local storage

Refreshing the tokens is not handled in the code. So when the token expires then the app does not let user do anything.

Need to delete the token from local storage when we receive the exception from the server that the token is expired or the user is not found.

Should we migrate all files to file-scoped namespaces?

Chatting and Error logging is not working for external users.

there is a bug in signalr
the chat wont work if you register from facebook
sugnalr want the clame id that facebook gave
and not the id from localdb
i think you need another property that will store the clame id from external login
--> NameIdentifier <--
tnx for the video

Final touch before production release

• Remove "Remember me" option for now
• Fix external logins on the register page
• Send message on "enter" and remove the "send" button
• Disable "Download Profile Picture", "Notifications", "Settings" controls for "None" roles
• Add proper text on all the pages what user needs to do to get "general" role
• Protect "Chat" page from the "None" roles
• Add "Report an issue" & "Donate" links

Show Toast messages on Save and Register buttons

Add register functionality for the new users

We need to add "Register" user functionality for the new users. Currently, they can register with only external logins

Moving database to the wwwroot folder.

Upgrade project from .NET5 to .NET6

.NET6 has amazing features for Blazor WASM app. It's November and it's time to upgrade. :)

Open Donate and Source Code links in new browser tab

Add functionality to switch between dark and light theme

Run BlazingChat as a Blazor Server.

It's time to switch between Blazor Server and WebAssembly

Not found: https://localhost:5001/signin-google?state=Cf

Hello all.

Thanks for these awesome samples:-) I am trying to get Google auth going and I've replicated the steps in Episode15. I am getting some of the way (my Controller was hit, I select my Google user) but I end up with https://localhost:5001/signin-google?state=Cf.......... not found.
I seems that I am missing something somewhere?
Kind regards
Martin

Make UI look nicer for both desktop and mobile views

Add youtube link to videos

Hi! Thanks for your very helpful youtube channel and related github repo 👍

I created a pull request to link the youtube videos but I realized that it was the wrong link!

Could you add the link in the README?

External users shouldn't need to be verified.

When user logs in with Twitter or Facebook user then it's okay to give them the "General" roles instead of asking them to send an email to verify their user.

Facebook Authentication cann't able to login.

Facebook authentication wherein the button click is redirected to the host for further authorization towards Facebook. Been trying out this for a now. I'm not able to make it work as user/FacebookSignIn responds with "Sorry, there's nothing at this address".Please can You help me out .

Need to figure out how can we get userid for the logger when using JWT authorization

Add "Remember me" option on the login page

This could be achieved by setting IsPersitent property to True. You will have to send that parameter over the API

Add validations on login and register page

Currently there are no validations on the login and register page. Let's do the following tasks.

• Email Address Validations
• Password length validation. It should be at least 8 chars
• Add fields for first name & last name
• All the fields are mandatory fields on the login and register page

Add SpinPro kit component on the login and register page

Currently, system is taking long time to register or login a user and it looks users are clicking on it multiple times. That's why we have multiple users in our system. I should also check the logic for generating duplicate records on the server side.

I am thinking of adding SpinPro kit component here just like we have at Profile page. that way when user clicks on the the Login or Register button we will show the spinner.