Whenever I try to run the app in Safari, the Firebase Auth method `getRedirectResult` is consistently returning null

I am currently developing a web application using Firebase. I have encountered an issue with the Firebase Auth getRedirectResult, which is consistently returning null when my app is running on Safari.

The front-end of my app is built with Next.js.

The expected behavior of the app is as follows:

  1. Upon clicking the "Sign in with Google" button on the login page, users should be redirected to 
    /auth-redirect?redirect_uri=onboarding
  2. getRedirectResult should initially return null, prompting the use of signInWithRedirect for authentication
  3. The authentication provider should then callback to 
    /auth-redirect?redirect_uri=onboarding
    via Firebase
  4. Afterwards, getRedirectResult should become non-null and direct the user to the specified redirect URI

However, I am facing an issue where the result of getRedirectResult remains null at step 4 when using Safari. On Chrome, it behaves correctly by returning a non-null value.

The implementation of the auth-redirect is outlined below:


// Code snippet not included for brevity

I am puzzled as to why 

const result = await firebaseAuth.getRedirectResult(auth)
returns null only when Safari is being used.

When inspecting the logs in the web inspector, I notice that there is a peculiar WebSocket connection error specific to Safari: 

WebSocket connection to 'ws://localhost:3000/_next/webpack-hmr' failed: WebSocket is closed due to suspension.
. However, I don't believe this is related to the issue since it pertains to HMR.

I would greatly appreciate any insights or advice you may have as I am unsure what factors to consider in resolving this discrepancy.

Information about my current environment:

  • Safari version: 16.2 (18614.3.7.1.5)
  • Chrome version: 109.0.5414.87（Official Build） （arm64）
  • Next.js version: 13.0.6
  • Firebase version: 9.8.1
javascriptfirebasenext.jsfirebase-authentication

Answer №1

I'm in the process of deploying to Vercel and I can confirm that this approach is working perfectly fine.

You can find more information about it here: https://github.com/firebase/firebase-js-sdk/issues/6716#issuecomment-1331981547

  • Make sure to set up reverse proxy settings in your next.config.js file.
/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,

  async rewrites() {
    return [
      {
        source: '/__/auth/:path*',
        destination: `https://${process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN}/__/auth/:path*`,
      },
    ]
  },
}
  • Remember to change the authDomain when initializing FirebaseApp to match your app's domain.
  • If you're using Google Cloud Platform, update the approved redirect URI to 
    https://<the-domain-that-serves-my-app>/__/auth/handler
    .

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding strings to an array according to the numerical value entered in an input field using JavaScript

Can we dynamically add a string to an array based on the quantity entered by the user in a field? For example, if a user adds an item to their shopping basket, the function() will add the SKU string to the array. However, if the user then updates the quan ...

javascriptarrays

Having trouble getting a response when using formidable in Next.js?

I am working on uploading a file from the front end to my GCP workflow, and everything seems to be functioning correctly. However, I am consistently encountering an issue where the API resolved without sending a response message appears. I attempted to r ...

javascriptreactjsnode.jsnext.js

At times, the loading image fails to appear on Ajax

Take a look at my code below: function apply_image_effect(){ $.ajax({ url: "image/image.php", global: false, type: "POST", data: ({my_color:encodeURIComponent($('#my_color').val()),my_size:$('#my_size&apos ...

javascriptjqueryajaxpostget

Javascript splice method mistakenly eliminating the incorrect elements

I have an array of objects like the one below: [{"name":"Rain"},{"name":"Storm"},{"name":"Forest"}] These objects are indexed as follows: [0, 1, 2]. I'm attempting to delete an item at a specific position using this code: $scope.selectedSound ...

javascriptarraysangularjsangularjs-scopeangularjs-ng-repeat

Grunt and Bower are loading a single script at the top of the page

Hey there! I'm still fairly new to this, but I've been using a yeoman generator for my projects, specifically the one found at https://github.com/DaftMonk/generator-angular-fullstack. My goal is to have Angular load at the top of the index.html i ...

javascriptangularjsgruntjsbower

In Angular, is there a way to concatenate a variable with "blah" at the beginning and end?

Success! Check out this snippet: <div ng-include="'/partials/' + items.my_filename + '.html'"></div> Despite finding the file, an error is still thrown: GET http://localhost:9000/partials/.html 404 (Not Found) Any ideas ...

javascriptangularjs

Is HTML5 Device Orientation the answer to a dependable compass system?

I am currently developing a project for mobile web that requires access to the compass direction of the user's device. At the moment, my code is quite basic, but here is what I have: var updateDirection = function (evt) { $("#dire ...

javascripthtmlcross-platformcompass-geolocationw3c-geolocation

Implement an onClick event to the newly created th element using document.createElement()

Through the use of document.createElement("th"), I am dynamically inserting columns into a table. var newTH = document.createElement('th'); Is there a way to add an onClick attribute to this element so that users can delete a column by clicking ...

javascripthtml-table

The next-redux-wrapper is throwing a TypeError stating that the nextCallback is not a valid function error within the wrapper.getServerSide

I encountered a TypeError: nextCallback is not a function error while attempting to export the wrapper.getServerSideProps function. Here is my code: import App from '../components/App' import {wrapper} from '../redux/Store'; import {ge ...

reactjsreduxnext.jsnext-redux-wrapper

Using the map function in React, you can tie the state to a conditional statement

I am facing an issue with my post list where I want to show comments only when a post is toggled. However, I cannot access the state in my method that checks if the post is toggled or not. Shouldn't arrow functions automatically bind the context? va ...

javascriptmeteorreactjs

What are the advantages of incorporating Grafbase with Graphql in your project?

Recently, I came across Grafbase being utilized alongside Graphql and it has raised some questions for me. I understand that graphql is a query language designed to efficiently fetch data without the issues of overfetching and underfetching commonly seen ...

next.jsgraphql

Optimizing Window Width with React.js and CSS

I'm currently in the process of building a responsive website with react. I am utilizing CSS stylesheets for styling and have used @media queries to ensure responsiveness. However, I've encountered an issue while testing in Chrome where the elem ...

javascriptcssreactjsgoogle-chrome

Tips for reverting a component back to its initial state in React when a prop is modified

I am dealing with a prop named props.currPage. This prop gets updated based on the button that is clicked. Whenever a button is clicked, I want a certain part of the component to reset to its initial state. Unfortunately, I am facing an issue where the "l ...

javascriptreactjsaudioreact-props

A guide on smoothly navigating to the desired row in a gridview using Asp.net

Currently, I am developing a project using ASP.net and C# technology. In my application, I integrated a GridView that contains multiple rows. Within the grid, there is a text box and a search button available. The columns displayed in the grid are Id and ...

javascriptc#jqueryasp.netgridview

Strategies for resolving the problem of null values from getParameter() being passed from AJAX to servlet

After reading numerous answers on Stack overflow, I have tried various solutions to fix this issue without success. My goal is to send a JavaScript variable to a servlet using AJAX within an else statement in JS. However, I keep receiving null in the alert ...

javascriptjavajqueryajaxservlets

Do not store start_url in the service worker cache

I'm facing some challenges while trying to set up a service worker for my website. My goal is to only cache css/js/fonts and specific images/svg files, without caching the HTML since it's constantly being updated every minute. Although it seems ...

javascriptservice-worker

Tips for showcasing all values in a nested array

In my Vue application, I am dealing with a nested array where users can select one date and multiple times which are saved as one object. The challenge I am facing now is how to display the selected date as a header (which works fine) and then list all the ...

javascripttypescriptvue.jsvuetify.js

Mastering the art of seamless navigation within a single page through the magic of

I have two HTML pages: "Login.html" and "index.html". Instead of a normal href linking, I want the user to navigate to "index.html" when they click on the login button. Furthermore, I want the index page to be displayed within the codes of login.html, cre ...

javascriptjquerycsshtml

Customize bullet list icons to adjust in size based on content using css

In my CMS project, the CMS team has a special requirement regarding unordered and ordered lists. They want the size of the bullet list icon to adjust according to the text content within the list. The image below shows the default design of a list item: ...

javascriptjqueryhtmlcss

Combining Node.js with Backbone.js: A Perfect Pairing

After extensive research on both Node.js and Backbone.js, including tutorials and courses from Code School, I have a solid understanding of the roles these technologies play in web applications. However, my challenge lies in integrating Node.js and Backbo ...

javascriptnode.jsmongodbbackbone.jsexpress