Help with AuthSession for shell Apps

Expo SDK
1

hey trying to get AuthSession to works, seems to work fine on my XDE in local development, but the redirect URL 404s in my shell app and when trying to use the Expo app

import * as React from "react";
import {
    Alert,
    StyleSheet,
    Text,
    View,
} from "react-native";
import { Button } from "react-native-elements";

import { AuthSession } from "expo";
import { NavigationActions } from "react-navigation";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import JWTAuthDuck from "./jwt-auth-duck";

import toQueryString from "../../utils/to-query-string";

import FullWidthButton from "../full-width-button/full-width-button";

interface IAuthButtonProps {
    auth0Domain: string;
    auth0ClientId: string;
    currentUser?: any;
}

class AuthButton extends React.Component<IAuthButtonProps, null> {
    public render() {
        return (
            <FullWidthButton
                action={this.loginWithAuth0}
                color="#00B0B0"
                text="Log in"
            />
        );
    }

    private loginWithAuth0 = async () => {
        const redirectUrl = await AuthSession.getRedirectUrl();
        console.log(redirectUrl);
        const result = await AuthSession.startAsync({
            authUrl: `${this.props.auth0Domain}/authorize` + toQueryString({
                client_id: this.props.auth0ClientId,
                redirect_uri: redirectUrl,
                response_type: "token",
                scope: "user",
            }),
            returnUrl: null,
        });

        if (result.type === "success") {
            this.handleParams(result.params);
        }
    }

    private handleParams = (responseObj) => {
        if (responseObj.error) {
            Alert.alert("Error", responseObj.error_description
                     || "something went wrong while logging in");
            return;
        }
        this.props.actions.addCurrentUser(responseObj);
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: "center",
        justifyContent: "center",
    },
    title: {
        fontSize: 20,
        marginTop: 40,
        textAlign: "center",
    },
});

const mapStateToProps = (state) => ({
    auth0ClientId: state.auth.auth0ClientId,
    auth0Domain: state.auth.auth0Domain,
    currentUser: state.auth.currentUser,
});

const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(
            {
                addCurrentUser: JWTAuthDuck.creators.addCurrentUserFromIDToken,
            },
            dispatch,
        ),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(AuthButton);

and sample auth-duck

import Duck from "extensible-duck";

import * as jwtDecoder from "jwt-decode";

interface IAuth0Response {
    access_token: string;
    id_token: string;
}

export default new Duck({
    creators: (duck: Duck) => ({
        addBearerTokenToStore: (auth0Response: IAuth0Response) => {
            return {
                auth0Response,
                type: duck.types.AUTH_SUCCESS,
            };
        },
        addCurrentUser: () => {
            return {
                type: duck.types.ADD_CURRENT_USER,
            };
        },
        logout: () => {
            return {
                type: duck.types.LOGOUT,
            };
        },
    }),

    initialState: () => ({
        auth0ClientId: "I6MZKWLTpCWrDPhHy25j0817Yd7RXsmr",
        auth0Domain: "https://elysiirings.auth0.com",
        currentUser: null,
        token: null,
    }),

    types: [
        "ADD_CURRENT_USER",
        "AUTH_SUCCESS",
        "LOGOUT",
    ],

    reducer: (state: any, action: any, duck: Duck) => {
        switch (action.type) {
        case duck.types.AUTH_SUCCESS:
            const bearerToken: any = action.auth0Response.access_token;

            return {
                ...state,
                token: bearerToken,
            };
        case duck.types.ADD_CURRENT_USER:
            const token: any = action.auth0Reseponse.access_token;

            const apiUrl: string = "https://elysiirings.auth0.com/tokeninfo";

            const currentUser = fetch({
                body: JSON.stringify({
                    token,
                }),
                json: true,
                method: "POST",
                uri: apiUrl,
            }).then((response) => {
                return response.json();
            });

            return {
                currentUser,
                ...state,
            };
        case duck.types.LOGOUT:
            return {
                ...state,
                currentUser: null,
                token: null,
            };
        default:
            return state;
        }
    },
});

Any help would be much appreciated. Thank you!

2

confirmed that the redirectUrl from AuthSession (e.g. AuthSession.redirectUrl()) is the same. not sure why I get the 404 then. Is there something else we’re redirecting to?

3

Also, I have confirmed this works when scanning the QR code in the native expo app, but not in the shell app.

4

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.