Get customToken from URL and login using signInWithCustomToken

signInAfterGettingToken.js

// Mobile: React Native

import React, {useState, useEffect} from 'react';

import { View } from 'react-native';
import {Button} from 'react-native-paper';
import { WebView } from 'react-native-webview';

const App = () => {
  const [show, setShow] = useState({isOpen: false, url: null});
  const [customToken, setCustomToken] = useState(null);
	
  const handleWebViewNavigationStateChange = newNavState => {
  const {url} = newNavState;

  if (url.includes('customToken')) {
      const token = url.split('customToken=')[1];
      setCustomToken(token);
      setShow({isOpen: false, url: null});
    }
  };


  // LOGIN THE USER USING CUSTOM TOKEN
  useEffect(() => {
    // signInWithCustomToken
    if (customToken) {
      auth
        .signInWithCustomToken(customToken)
        .then(user => {
          // eslint-disable-next-line no-alert
          alert(`Logged in as ${auth.currentUser.email}`);
        })
        .catch(err => console.error(err));
    }
  }, [customToken]);

	return (
	    <View>
		<View>
		  <Button
		    onPress={() =>
		      setShow({
			isOpen: true,
			url: 'webview.com/login',
		      })
		    }>
		    Login
		  </Button>
		</View>
		{show.isOpen && (
		  <WebView
			source={{uri: show.url}}
			onNavigationStateChange={handleWebViewNavigationStateChange}
		   />
		)}
	      </ImageBackground>
	    </View>
	  );
};