CG-5970: Cannot get accessToken (#40)

CG-5970: Cannot get accessToken
---
### Deployment:
To apply changes and make it visible to customers, there are two parts
that need to be deployed:
* MF backend: need to merge this PR and then trigger the GitHub action
* MF frontend: go to Vercel and update the environment variable. The
frontend will be deployed automatically once the PR is merged to the
`main` branch
### Changes
* Add supported callback URL in MF backend.
* Upgrade dependencies for MF backend.
* Upgrade dependencies for MF frontend.
* Remove redundant components.
* Correct callback URL for EpiserverOIDCProvider.
* Rotate AZURE_AD_CLIENT_SECRET for Azure AD in the local environment.

~### Issue~
~There's one unresolved issue when building the source code:~
~<img width="1234" alt="image"
src="https://github.com/episerver/content-graph-js-sdk/assets/8802680/bbfe18f5-bf95-4494-a1b2-bda3848e8c9c">~
The issue is resolved by change typescript-react-query to
typescript-graphql-request

Author: jamestran1

.github/workflows/deploy-backend.yml

@@ -27,11 +27,12 @@ jobs:
         repository: musicfestival
 
     - name: Publish to Registry
-      uses: elgohr/Publish-Docker-Github-Action@master
+      uses: elgohr/Publish-Docker-Github-Action@v5
       with:
         name: musicfestival
         username: ${{ steps.ecr.outputs.username }}
         password: ${{ steps.ecr.outputs.password }}
         registry: musicfestivalacr.azurecr.io
         workdir: samples/musicfestival-backend-dotnet
+        buildoptions: "--compress --force-rm"
         tags: "latest"

samples/musicfestival-backend-dotnet/MusicFestival.Backend.csproj

@@ -8,12 +8,13 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="EPiServer.CMS" Version="12.22.4" />
+    <PackageReference Include="EPiServer.CMS" Version="12.23.0" />
     <PackageReference Include="EPiServer.ContentDefinitionsApi" Version="3.9.0" />
     <PackageReference Include="EPiServer.ContentDeliveryApi.Cms" Version="3.9.0" />
+    <PackageReference Include="EPiServer.ContentDeliveryApi.Core" Version="3.9.0" />
     <PackageReference Include="EPiServer.ContentManagementApi" Version="3.9.0" />
-    <PackageReference Include="EPiServer.OpenIDConnect" Version="3.8.0" />
-    <PackageReference Include="EPiServer.OpenIDConnect.UI" Version="3.8.0" />
+    <PackageReference Include="EPiServer.OpenIDConnect" Version="3.9.0" />
+    <PackageReference Include="EPiServer.OpenIDConnect.UI" Version="3.9.0" />
     <PackageReference Include="Optimizely.ContentGraph.Cms" Version="3.4.0" />
   </ItemGroup>
 </Project>

samples/musicfestival-backend-dotnet/Startup.cs

@@ -87,6 +87,7 @@ public void ConfigureServices(IServiceCollection services)
                         new Uri(baseUri, "/"),
                         new Uri(baseUri, "/login-callback"),
                         new Uri(baseUri, "/login-renewal"),
+                        new Uri(baseUri, "/api/auth/callback/optimizely_cms"),
                     },
                 });
 
@@ -147,7 +148,7 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
         app.UseStaticFiles();
         app.UseRouting();
         app.UseCors(b => b
-            .WithOrigins(new[] { $"{_frontendUri}" })
+            .WithOrigins(new[] { $"{_frontendUri}", "*" })
             .WithExposedContentDeliveryApiHeaders()
             .WithExposedContentDefinitionApiHeaders()
             .WithHeaders("Authorization")

samples/musicfestival-frontend-nextjs/.env.local

@@ -1,6 +1,6 @@
 NEXTAUTH_URL=http://localhost:3000/
 AZURE_AD_CLIENT_ID=355bdf4f-d596-4db7-8efe-8e3bc24a3611
-AZURE_AD_CLIENT_SECRET=dBo8Q~qaopwwO-O3gL_Hv58HQHTJ1faWPpFxudcl
+AZURE_AD_CLIENT_SECRET=eOn8Q~KxYudVYDmBs6OYYb9xolWvv~I1LdB1nbSc
 AZURE_AD_TENANT_ID=7c4a1b79-4b8e-4ac7-b7e1-c5c3c5a4c139
 OKTA_CLIENT_ID=0oa7c6ejkpzJ0CtcS1d7
 OKTA_ISSUER=https://prep.login.optimizely.com

samples/musicfestival-frontend-nextjs/components/Login-Callback.tsx

@@ -1,17 +1,18 @@
 import { Session } from "next-auth"
 import { useSession, signIn, signOut } from "next-auth/react"
 
-type ExtendedSession = Session & {
-  token: any
+export type ExtendedSession = Session & {
+  token?: any
 }
 
 export default function Component() {
-  const { data: session } = useSession()
+  const { data: session, status } = useSession()
   const extendedSession: ExtendedSession = session as ExtendedSession
-  if (extendedSession) {
+  if (extendedSession && status === "authenticated") {
+    const userName = extendedSession.token?.user?.name || extendedSession.token?.name
     return (
       <div className="btn">
-        <button onClick={() => signOut()}>{extendedSession.token?.token?.user?.name}</button>
+        <button onClick={() => signOut()}>{userName}</button>
       </div>
     )
   }

samples/musicfestival-frontend-nextjs/components/LoginBtn.tsx

@@ -29,7 +29,6 @@ function LandingPage({ content }: LandingPageProps) {
                                 (() => {
                                     const contentItem = mainContentAreaItem?.ContentLink?.Expanded
                                     if (contentItem?.__typename === "ImageFile") {
-                                        console.log('contentItem', contentItem?.Url)
                                         return (
                                             <div className="Grid-cell u-md-size1of2" key={mainContentAreaItemIdx}>
                                                 <div className="Page-container ImageFile">