swiftui to Instagram Basic Display API

Question

When i try to login using "Instagram Basic Display API" i am not able.

I am following this video(i set it at the time i get stuck)::

https://youtu.be/DA7s47EBJiY?si=9qIbTmO7clqZjT_q&t=627

according to the video and facebook i think i am suppose to go to the following url::

https://api.instagram.com/oauth/authorize?client_id=365803409610153&redirect_uri=https://socialsizzle.herokuapp.com/auth/&scope=user_profile&response_type=code

I have added the uri to the facebook instagram developer account::

365803409610153 is coming from instagrams facebook developer account:::

but this does not work on my computer.

the goal is to add "Instagram Basic Display API" to my swiftui app.

If i run the following code and login in (using the user that i added to facebook developer account ) , it appears to allow me to fully log in but breaks on the redirect uri

I am able to get the code from the url in the mobile app, not sure what to do with that.

this is the url being pinged by the phone that is working::

https://api.instagram.com/oauth/authorize?client_id=365803409610153&redirect_uri=https://socialsizzle.heroku.com/auth/&scope=user_profile&response_type=code

it does not work when i try it on my mac.

import SwiftUI
import SafariServices

struct ContentView: View {
    let clientID = "365803409610153"
    let redirectURI = "https://socialsizzle.heroku.com/auth/"
//    let redirectURI = "http://localhost:3000/api/test/" //

    let scope = "user_profile"
    let responseType = "code"
    
    @State private var isShowingInstagramLogin = false
    @State private var errorMessage: String?
    
    var body: some View {
        VStack {
            if let errorMessage = errorMessage {
                Text(errorMessage)
                    .foregroundColor(.red)
            } else {
                Button(action: {
                    self.isShowingInstagramLogin = true
                }) {
                    Text("Login with Instagram")
                }
                .sheet(isPresented: $isShowingInstagramLogin) {
                    SafariView(url: self.instagramAuthURL)
                }
            }
        }
    }
    
    var instagramAuthURL: URL {
        var components = URLComponents()
        components.scheme = "https"
        components.host = "api.instagram.com"
        components.path = "/oauth/authorize"
        components.queryItems = [
            URLQueryItem(name: "client_id", value: clientID),
            URLQueryItem(name: "redirect_uri", value: redirectURI),
            URLQueryItem(name: "scope", value: scope),
            URLQueryItem(name: "response_type", value: responseType)
        ]
        return components.url!
    }
}

struct SafariView: UIViewControllerRepresentable {
    let url: URL
    
    func makeUIViewController(context: Context) -> SFSafariViewController {
        return SFSafariViewController(url: url)
    }
    
    func updateUIViewController(_ uiViewController: SFSafariViewController, context: Context) {}
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

i found a couple other stackoverflows but none of the answers helped: Instagram Basic Display API connection error Get long access token from instagram mobile app