Auth0 and AuthSession

Expo SDK
1

I attempted to set up Auth0 hosted-page authentication with Expo’s AuthSession API. It appears to work, both visually and by observing Auth0’s logs, but the promise returned by AuthSession.startAsync never resolves. Is it possible to use Auth0 with AuthSession? If so, what needs to be done to return the auth data to from the hosted page to AuthSession?

2

Hello! I do not know what an auth0 hosted page is – I imagine this is just their normal authorize url?

I tried this out and it works fine for me. Compare the following your code and you’ll probably find the problem:

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { AuthSession } from 'expo';

const auth0ClientId = 'AN3D6mC65YEStVC5KzxalZf3mmRjEnPP';
const auth0Domain = 'https://brentvatne.auth0.com';

export default class App extends React.Component {
  state = {
    result: null,
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Open Auth0 Auth" onPress={this._handlePressAsync} />
        {this.state.result ? (
          <Text>{JSON.stringify(this.state.result)}</Text>
        ) : null}
      </View>
    );
  }

  _handlePressAsync = async () => {
    let redirectUrl = AuthSession.getRedirectUrl();
    let authUrl =
      `${auth0Domain}/authorize` +
      toQueryString({
        client_id: auth0ClientId,
        response_type: 'token',
        scope: 'openid name',
        redirect_uri: redirectUrl,
      });

    let result = await AuthSession.startAsync({ authUrl });
    this.setState({ result });
  };
}

function toQueryString(params) {
  return (
    '?' +
    Object.entries(params)
      .map(
        ([key, value]) =>
          `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
      )
      .join('&')
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

try this at https://expo.io/@notbrent/TestAuthZero

3

Thanks, Brent! It turns out that the promise was resolving but was not logging, leading me to believe it wasn’t resolving. I’ve since fixed the logging issue.

Unfortunately, this exposes a different problem, which is that the authorize flow above does not allow an offline_access scope, which is necessary to retrieve a refresh token. In order to get a new access token before the first one expires, we’d either need a refresh token or could restart the AuthSession. Obviously, the latter would lead to the AuthSession browser interrupting normal app usage, so that’s not an acceptable solution. It looks like the only way to retrieve a refresh token is with the much more complicated Authorization Code Grant (PKCE) flow.

4

@domkm - this isn’t really an issue with AuthSession though, this is a concern specific to how to use Auth0. you can get around this if you want by not using Auth0, but they do this to enforce that you securely access the user’s token

5

That’s absolutely true. This is not an issue with AuthSession. I only posted it to follow up with you and because I thought it could be useful for the next person who comes across this issue.

2 Likes