Epic on FHIR Sandbox Clinician Login Issue

Question

I'm having trouble logging in as a clinician to the Epic FHIR sandbox using the standalone OAuth 2.0 workflows. Every time I attempt to execute a GET request with the test user credentials FHIR and the password EpicFhir11!, I encounter a 404 not found error.

According to the documentation, my app should link (using HTTP GET) to the authorize endpoint and append specific query string parameters, including response_type, client_id, redirect_uri, scope, and aud. I've implemented this in my code and verified that the values are correct multiple times. However, I keep getting this error. Your assistance would be greatly appreciated.

import { useEffect } from 'react';
// import { oauth2 as SMART } from 'fhirclient';

import { useLocation, useNavigate } from 'react-router-dom';

import { physician_client_id, physician_redirect_uri, fhirServerBaseUrl } from '../secret';

const PhysicianLogin = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const searchParams = new URLSearchParams(location.search);
    let code = null;
    code = searchParams.get('code');

    const audience = fhirServerBaseUrl + '/';

    const handleSubmit = (e) => {
        e.preventDefault();
        const authLink = `${fhirServerBaseUrl}/oauth2/authorize?response_type=code&redirect_uri=${physician_redirect_uri}&client_id=${physician_client_id}&scope=openid%20fhirUser&aud=${audience}`;
        window.location.href = authLink;
    };

    useEffect(() => {
        if (code) {
            console.log({
                code: code,
            });

            const params = new URLSearchParams();
            params.append('grant_type', 'authorization_code');
            params.append('code', code);
            params.append('redirect_uri', physician_redirect_uri);
            params.append('client_id', physician_client_id);
            params.append('state', '1234');

            let tokenUrl = fhirServerBaseUrl +'/oauth2/token';

            fetch(tokenUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    // Accept: 'application/x-www-form-urlencoded',
                },
                body: params,
                // body: JSON.stringify({
                //  grant_type: 'authorization_code',
                //  code: code,
                //  redirect_uri: redirect,
                //  client_id: clientId,
                // }),
            })
                .then((response) => response.json())
                .then((data) => {
                    if (data.access_token) {
                        localStorage.setItem('accessToken', data.access_token);
                        localStorage.setItem('patient', data.patient);
                        navigate('/physician');
                        // fetch(`https://fhir.epic.com/interconnect-fhir-oauth/api/FHIR/DSTU2/Patient/${this.patient}`)
                    }
                    console.log({
                        tokenData: data,
                    });
                });
        } else {
            console.log('no code');
        }
    }, []);
    return (
        <section>
            <div className='login-container'>
                <form action='' className='login-form' onSubmit={handleSubmit}>
                    <div className='form-control'>
                        <input
                            type='submit'
                            value='Login with FHIR-epic'
                            className='btn-submit'
                        />
                        
                        >
                            Sign in with FHIR epic
                        </a> */}
                    </div>
                </form>
            </div>
        </section>
    );
};

export default PhysicianLogin;

I anticipated being able to sign in to the Epic sandbox with the clinician test account. I made sure that the client ID for non-production, the redirect URI, and the FHIR server base URL were all accurate. I also checked that the application's intended audience is clinicians and even attempted to log in using a different test user (FHIRTWO). I've contacted [email protected], and they directed me to get in touch with Vendor Services. I'm looking to sidestep any fees associated with Vendor Services if I can.

Answer 1

It seems like you aren't even getting to the user login screen, therefore something must be off about your initial call. A couple of things to try:

1. Be sure your redirect URI (down to capitalization, slashes, etc.) matches exactly with one of the redirect URIs in your app listing.
2. Make sure you've waited long enough (up to 12 hours) for your app and any changes you've made to it to sync to the sandbox environment.
3. It seems your audience is incorrect. You are setting it to fhirServerBaseUrl + '/', which would make it https://fhir.epic.com/interconnect-fhir-oauth/. It should be https://fhir.epic.com/interconnect-fhir-oauth/api/FHIR/R4 (or whichever FHIR version you are using if not R4).

If these don't work, please clarify what you are setting fhirServerBaseUrl to.