Next.JS / Clerk.com and authentication with .net Web API

I’m new to react/next.js and I’m trying to setup my app to use a backend .NET 8 WEB API.

I have my WEB API set up via this Link.

This works great. When I start my WEB API in VS 2022, then it requires me to sign into Clerk.com and then displays my WEB API call.

Now I’m trying to call the same WEB API via my next.js app.

In the end, I would want the user to sign into my next.js app, then use that sign in validation to pass to my .NET 8 WEB API to log into that and then be able to talk properly to the WEB API.

Right now, I have to make sure I am signed out of the WEB API, then sign into next.js via Clerk.com. Then click the button that calls the WEB API and it requires me to sign in AGAIN to Clerk.com.

After this is done it receives a 302 found. Seems like it isn’t passing across the necessary items to do the authentication?

Any thoughts?

Here is my next.js code:

"use client"

import { useEffect, useState } from 'react';
import { WeatherForecast } from '../interfaces/WeatherForecastModel'; // Adjust the import path as necessary

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons'
import { useAuth, useClerk } from '@clerk/clerk-react'
enableRipple(true);

const Index = () => {
  const { getToken } = useAuth()
  const [token, setToken] = useState(''); // Manage token with useState
  const [clerkOther, setclerkOther] = useState(''); // Manage token with useState
  const [data, setData] = useState<WeatherForecast[]>([]);

  const { user } = useClerk();

  const fetchData = async (url: string) => {
    const token = await getToken();
    const clerkOther = user?.publicMetadata.clerk_token as string;
    setToken(token ?? ''); // Update the token state
    setclerkOther(clerkOther); // Update the token state

    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
      mode: 'no-cors',
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    return response.json();
  };

  const clickEventHandlerWeather = async () => {
    try {
      const jsonData = await fetchData('https://localhost:7160/WeatherForecast');
      setData(jsonData);
    } catch (error) {
      console.error('Failed to fetch weather data:', error);
    }
  };

  const clickEventHandlerLogin = async () => {
    try {
      await fetchData('https://localhost:7160/Login');
      // For login, assuming you might not want to set any specific data
    } catch (error) {
      console.error('Failed to login:', error);
    }
  };

  return (
    <div className="row">
      <div className='col-md-6'>
        <ButtonComponent cssClass='e-danger' onClick={clickEventHandlerLogin}>Login</ButtonComponent>
      </div>
      <br></br><br></br>
      <div className='col-md-6'>
        <ButtonComponent cssClass='e-danger' onClick={clickEventHandlerWeather}>Weather</ButtonComponent>
      </div>
      {/* Display token. Ensure you handle displaying sensitive information securely */}
      <div style={{ width: '200px' }}>{token}</div>
      <br></br>
      <div style={{ width: '200px' }}>clerkOther: {token}</div>
    </div>
  );
};

export default Index;

Note: Another issue is CORS. I know I don’t need to do this, but that was causing other errors too. So I plan to research that once I’m about to hit the WEB API.