Coding with Tom
Coding with Tom
  • 12
  • 96 328
React and ASP.NET Core Identity Authentication
Dot Net 8.0 has new project templates for React for Visual Studio 2022. They do a good job getting you started but they don't include an example of how to use ASP.NET Core Identity for authentication.
React and ASP.NET Core 8 make a great combination for web development. You can use react to create your single page application GUI while asp.net core handles all of the backend work. ASP.NET core includes a robust authentication and identity management system. You can use the ASP.NET Core 8 and React project template from Microsoft to get started quickly. However, unlike the Blazor and ASP.NET Core projects, this template does not have identity features built-in. In this video, I will show you how to add them to your project.
00:00 Introduction
00:41 Demo
01:24 Create a New Project
03:00 Adding Project Dependencies
03:45 Adding Entity Framework Database Support
07:00 Adding Identity Endpoints
09:45 Adding Custom Additional Endpoints
12:40 Configuring Vite
15:00 Adding React Components
19:02 AuthorizeView Component
24:00 React Router
24:51 Login Page
27:44 Register Page
30:00 Deploying Database
30:50 Final Demo
Github Code is available at: github.com/codingwithtom1/ReactIdentity
Переглядів: 17 285

Відео

ASP.NET Core 8 & Svelte - A Perfect Match!
Переглядів 3,7 тис.9 місяців тому
In this video I pair the new release of ASP.NET Core 8 with the Svelte javascript framework. ASP.NET Core 8 provides minimal Apis for using Microsoft Identity. This project accesses these apis using a custom Authentication component implemented in Svelte. Svelte is an increasingly popular alternative to React and Angular. It's HTML and code sections in .Svelte files is structured similarly to B...
.NET 8 Blazor New Forms Functionality Explained
Переглядів 10 тис.10 місяців тому
Blazor 8 Introduces improved Server Side Rendering for Blazor Forms components. This video explains how to implement Forms with Validation that will function without the use of Blazor Server Interactive Rendering or WebAssembly. This video also discusses the new Enhanced Form functionality that results in no full page refreshes for form submission even when using Server Side Rendering. If you a...
.NET 8 Released - Awesome new Blazor Render Modes Demystified
Переглядів 7 тис.10 місяців тому
In Blazor 8, Microsoft enabled developers to mix and match the use of Blazor Server and Blazor Webassembly on a per page or per component basis. This new paradigm will require a new way of thinking, but the possibilities are incredible! The decision to use web assembly or server is no longer an all-or-nothing matter. The best tool can be used for the job where it makes sense. In this video I pr...
.NET 8 RC2 - Blazor 8 Nears the Finish Line
Переглядів 3,9 тис.11 місяців тому
00:00 Introduction and Explanation of What's New 07:36 Tour of Blazor Web App Template 24:00 Handling Access of Resources with Auto Mode Release Candidate 2 of .NET 8 brings exciting updates to Blazor! The Blazor Web App Template now fully supports: 1) Static, Server, WebAssembly, and Auto Render Modes 2) Form handling with Static Rendering 3) Fully rewritten Identity Pages using Blazor Compone...
Full Stack Web Development with Blazor - Full 6 Hour Course
Переглядів 20 тис.Рік тому
The course provides a comprehensive guide to building a sophisticated Invoice Application using Blazor Server and Entity Framework. Starting with an introduction, it quickly dives into a demo of the application. Participants then learn to set up a Blazor Server template, explore the template code, and understand Blazor component attributes. The course covers interactive components and SignalR, ...
.NET 8 Preview 7 - Auto Switch from Blazor Server to Web Assembly now available!
Переглядів 2,7 тис.Рік тому
With the latest preview version of .NET 8 (Preview 7), you now have the ability to have Web Assembly components render first on the server while they are downloading in the background to provide for a quick response time for your application while still offloading processing to the web browser. What are the ramifications of this though? I talk about them in this quick video demonstrating the ne...
Blazor "United" has almost Arrived in .NET 8 Preview 6!
Переглядів 9 тис.Рік тому
Microsoft just released .NET 8 Preview 6 which contains exciting new updates to Blazor. This video covers: - Mix and match Blazor Server and Web Assembly components in a single project or even a single page. - Blazor EditForm without SignalR or WASM - Streaming Rendering This tutorial demonstrates these and more and hopefully will help you understand where Microsoft is headed next with Blazor. ...
Azure OpenAI C# API Quick Tutorial
Переглядів 6 тис.Рік тому
In this video I step you through the basics of creating a chat client in C# using the Azure OpenAI api. If you want to get up to speed quickly on how this API works check out this video. Check out the other videos on my channel for a complete tutorial on a Blazor Chat app using Azure Cognitive Search. Code is here: github.com/codingwithtom1/QuickOpenAI
Exciting Blazor Updates in .NET 8 Preview 5
Переглядів 6 тис.Рік тому
In this video I demonstrate the use of the new Blazor Web App template. Microsoft is planning to combine Blazor Server and Blazor WebAssembly into one project type. By default your app will behave as a standard ASP.NET Core Razor app, but you will be able to designate specific components on pages to use either Blazor Server side Rendering or Blazor Web Assembly, or both, automatically. .NET 8 P...
Create a Company Chat CoPilot using Azure AI and Cognitive Search in Blazor /C#
Переглядів 3,8 тис.Рік тому
In this follow up video to my last video I add Azure Cognitive search to allow for retrieval augmented generation of content. This allows the Chat web site to incorporate information from custom documents in the answers it provides to the user. This is part 2 of a 2 part series. Please watch Part 1 here: ua-cam.com/video/bT-0xvHYpS8/v-deo.html The Code for this video is here: github.com/codingw...
Coding a ChatBot in C# and .NET Blazor using Azure AI from Scratch
Переглядів 7 тис.Рік тому
Do you want to learn how to build a ChatBot with Azure AI, Blazor and C#? Then watch this video where I show you how to do it from scratch using gpt 3.5, a powerful language model from OpenAI. You will learn how to: • Set up the Azure OpenAI service and get an API key • Create a Blazor Server App with a Chat component • Connect your app to the Azure OpenAI API and send and receive messages • Cu...

КОМЕНТАРІ

  • @dmitriiuelskii685
    @dmitriiuelskii685 6 днів тому

    Большое спасибо, что ответил эту тему. Очень жду новых видео!

  • @muheebar-rahman8294
    @muheebar-rahman8294 28 днів тому

    How to add a second button with a slightly different function?

  • @kvelez
    @kvelez Місяць тому

    9:05 .NET 7 is not supported any longer. Could you make a video tutorial on Blazor Web App / Blazor WASM?

  • @owlyhousenskyi
    @owlyhousenskyi Місяць тому

    Making a web-app with these frameworks, and explanation is amazing! Thanks, Tom😎

  • @kvelez
    @kvelez Місяць тому

    2:21 Do you have a fix for the npm install not working in the client directory

    • @Jerry-vy6xk
      @Jerry-vy6xk 25 днів тому

      Did you find anyway to fix it ?

  • @erencetin7805
    @erencetin7805 2 місяці тому

    bro i made a home page without vite , if i do this authentication with vite ,how do i connect two application? I just want to when user log-in route my home page

  • @darkmoon7432
    @darkmoon7432 2 місяці тому

    I DONT KNOW SHIT ABOUT ASP.NETcore & REACT But thanks to you i know what i m doing right NOW LOVE YOU <3 <3 <3

  • @alextchhailo8762
    @alextchhailo8762 2 місяці тому

    thank you!

  • @eyoo369
    @eyoo369 2 місяці тому

    It's a shame that Microsoft didn't just implement JWT for their identity API. Pinging the server to check for authentication.. doesn't that unnecessarily increase server load?

  • @avaygc5646
    @avaygc5646 2 місяці тому

    Will glad to for asp.ner core and Angular

  • @Credi6464
    @Credi6464 3 місяці тому

    Would love to see a video confugirng this app to a production setup and deploying it to Azure

  • @eddyelamin9015
    @eddyelamin9015 3 місяці тому

    Great video, except for the Vite configuration part. You were too fast and as a begginer I couldn’t understand what you did really. More explanation?

  • @ThomasBarron-ky8vs
    @ThomasBarron-ky8vs 3 місяці тому

    ChatCompletionsOptions seems to no longer reside in the Azure.AI.OpenAI namespace. I'm having trouble figuring out how to modify this solution to fit the latest version.

  • @LadyandGentlemens
    @LadyandGentlemens 3 місяці тому

    Amazing thank you!

  • @SiphosenkosiCele
    @SiphosenkosiCele 3 місяці тому

    Well done, This helps alot on my current research.

  • @attilio470
    @attilio470 3 місяці тому

    What if react is running on a different url? With this code I’m not able to store the cookie. Can you help me please ?

  • @ftj1976
    @ftj1976 3 місяці тому

    Very nice video! Exactly what i was looking to use witdh my API Net Core. Thank´s a lot.

  • @prashlovessamosa
    @prashlovessamosa 4 місяці тому

    Great thanks for this awesome stuff

  • @konstantingrozdev5563
    @konstantingrozdev5563 4 місяці тому

    Great content Tom! Judging from the comments, if you enhance the project with authorization, so people can use roles, it will be great.

  • @bdot598
    @bdot598 4 місяці тому

    Fantastic video and tutorial! Exactly what i was looking for to get a particular project started and as a way to learn React. Bravo!

  • @hosseinmahdavi3164
    @hosseinmahdavi3164 4 місяці тому

    Thank you, but there is a problem with the GitHub source.

    • @ftj1976
      @ftj1976 3 місяці тому

      Working fine for me! I just follow the videos.

  • @chrismantonuk
    @chrismantonuk 4 місяці тому

    This is the clearest, most detailed explanation I’ve found anywhere of how to integrate React with Identity. Thank you! Have you any examples of adding 2FA? 🙂 Do you have a Buy Coffee, Kofi link or something?

  • @heididaniels277
    @heididaniels277 4 місяці тому

    Good explanation but I am getting an error when I run your code: Error RZ9985 Multiple components use the tag 'InputText' Any Ideas? Thank you

  • @ravirama2954
    @ravirama2954 5 місяців тому

    Awesome, add an other video to implement 2FA

  • @DegsyboyGomes
    @DegsyboyGomes 5 місяців тому

    Just a tip - in your vite config instead of duplicating the api url for every endpoint - you could instead use : proxy:{ '*' : { target: 'localhost:7174', changeOrigin: true } },

  • @ronaldjohnson4470
    @ronaldjohnson4470 5 місяців тому

    Awesome tutorial, thank you.

  • @ennaceursawssen4381
    @ennaceursawssen4381 5 місяців тому

    I'm experiencing an issue with the installation of Azure OpenAI. Can anyone provide assistance, please?

  • @nicko9958
    @nicko9958 5 місяців тому

    You should delete "app.UseDefaultFiles();", "app.UseStaticFiles();" and "app.MapFallbackToFile("/index.html");" from your Program.cs else you get some warnings when starting the Server, becuase www-root was not found. The default VS Template "React and ASP.NET Core" has this bug included. I really don't know why Microsoft can't fix it...

  • @shabanelmogy7912
    @shabanelmogy7912 5 місяців тому

    we need big project with blazor to enlarge community of blazor

  • @TheDjscorpion95
    @TheDjscorpion95 5 місяців тому

    I am begging now , Lets go guys!!

  • @Poeisible
    @Poeisible 5 місяців тому

    Awesome, Any net 8 vesrsion?

  • @jiM3op
    @jiM3op 6 місяців тому

    This is so helpful... !

  • @logansomner5942
    @logansomner5942 6 місяців тому

    I just cloned your repo and it built and ran immediately with no problem. What kind of witchcraft is this?

  • @HOSTRASOKYRA
    @HOSTRASOKYRA 6 місяців тому

    Thank you! This is great work!

  • @leslawdietrich
    @leslawdietrich 6 місяців тому

    Awesome! Great demonstration of the entire process of preparing a typical office application. Probably the only such tutorial covering the popular Radzen library.

  • @tristanmeijer7080
    @tristanmeijer7080 6 місяців тому

    Thanks for this amazing tutorial, one question. What kind of extensions do you use? I don't have that extra gear icon next to my properties?

  • @SoumyadipMajumder-oo6lj
    @SoumyadipMajumder-oo6lj 6 місяців тому

    Does it good for .NET 8 LTS

  • @Lord_C0mmander
    @Lord_C0mmander 6 місяців тому

    How do you have two different kinds of users. Say a privateUser and CompanyUser. They will have unique properties that should be populated when registering a user and in React they qill have different ui as the idea is that they can interact with each other. So companies will see private users and vice versa

  • @Choosebrand
    @Choosebrand 7 місяців тому

    Thanks great video, any ideia on how to spin up a project with react, webapi and typescript with the CLI ? trying to do via VS code, but aint working properly.

  • @donashley386
    @donashley386 7 місяців тому

    This has been incredibly helpful! Thank you so much!

  • @BhranthanKuriyachan
    @BhranthanKuriyachan 7 місяців тому

    Is there any c# code or libraries that can used for retrieving the evaluation metrics(coherence, fluency, groundedness etc) data to test report?

  • @AliBerro-c1s
    @AliBerro-c1s 7 місяців тому

    How could we setup sveltekit in such a way to use the routes feature, both static and dynamic routes, the layout feature, and the load function that run before the page loads

  • @csunstudent148
    @csunstudent148 7 місяців тому

    Hey Tom, I was wondering: Based on this project structure and assuming you continue to implement new features in this same format, what would your hosting model be if you wanted to deploy your app? I've gotten a bit confused in the docs as things are broken up explicitly into both Blazor Server and Blazor WASM for the hosting info, but I've also heard that as soon as you have to access server resources, (which an app like this one does) it seems like you have to follow the Blazor Server method of hosting? Could you help shed some light on this?

  • @alexandralikin3830
    @alexandralikin3830 7 місяців тому

    Спасибо вам большое, друг

  • @evaristegalois7378
    @evaristegalois7378 7 місяців тому

    I have only just started this tutorial but already I'm learning so much. Thank you Tom for your full yet easy to understand explanation of what everything is and what it does. I'm already living in the era of .net8 and the new Blazor web app projects structure, so hopefully this will be updated very soon.

  • @MrKukuri44
    @MrKukuri44 7 місяців тому

    It does not make sense copying code, literally did exactly same and getting about 32 errors :D

  • @rajdeepjaiswal5394
    @rajdeepjaiswal5394 7 місяців тому

    How we can deploy it on web app of azure

  • @tbunreall
    @tbunreall 7 місяців тому

    Thanks for the tutorial, a lot more goes into this than I thought, will take a while to really get it down. Maybe next time a high level overview of all the pieces and how they come together would by nice, although just looking at the timestamps kind of does the same thing

  • @AhmedAymanM
    @AhmedAymanM 7 місяців тому

    I noticed that Items in fetch data page (razor component) gets updated twice, either by going to another page with mouse and going back again or pressing refresh (F5), any one noticed that? is there a reason for this?

  • @csunstudent148
    @csunstudent148 7 місяців тому

    I've worked a bit with Blazor Server and Blazor WASM pre .NET 8, but demystifying this new stuff has been too difficult for me until I watched your video. Thank you so much for the detailed guide, explanations, and codebase!!!!