How to pass an Amplify Cognito session from react native to webview?

Question

I have a react native app that renders a WebView of a Web app

The react native app uses Cognito and Amplify for authentication. The web app also uses the same Cognito and Amplify for authentication.

I have a login flow built with in the react native that has email/password login and social media federated Oauth logins. Both these login flows successfully work in the react native space and return a

CognitoUserSession {
  idToken: CognitoIdToken, 
  refreshToken: CognitoRefreshToken, 
  accessToken: CognitoAccessToken, 
  clockDrift: 0
}

When the react native app renders the WebView the web app is unauthenticated. I am able to pass the CognitoUserSession data into the WebView successfully. Unfortunately, I don't see a way to have Amplify re-authenticate with this session.

score 0 · Accepted Answer · answered Oct 30 '19 at 17:16

this is the mobileLogin function I wrote that works

import Amplify, { Auth } from 'aws-amplify';
import {
  CognitoUser,
  CognitoUserSession,
  CognitoIdToken,
  CognitoRefreshToken,
  CognitoAccessToken,
} from 'amazon-cognito-identity-js';

window.mobileLogin = async function(mobileSession) {
  amplify = Amplify.configure({
    ...config().amplify,
    userPoolWebClientId: '', //switch to mobile client
  });

const localSession = new CognitoUserSession({
  IdToken: new CognitoIdToken({ IdToken: mobileSession.idToken.jwtToken }),
  RefreshToken: new CognitoRefreshToken({ RefreshToken: mobileSession.refreshToken }),
  AccessToken: new CognitoAccessToken({ AccessToken: mobileSession.accessToken.jwtToken }),
});

const localUser = new CognitoUser({
  Username: mobileSession.accessToken.payload.username,
  Pool: Auth.userPool,
  Storage: Auth.userPool.storage,
});
localUser.setSignInUserSession(localSession);

// this seems like a hack
Auth.currentCredentials = async () => localSession;

try {
  await Auth.currentSession();
  console.warn(`mobile login current session!!`);
  store.dispatch(silentReloginAction())
} catch (ex) {
  console.warn(`mobile login ${ex}`);
}
 };
}

I have a similar problem, but I have the auth flow in the web app only, and a native android app deploys it in a web activity. However, I need session data to persist, so that the android user wont need to log in every time, but Auth.currentSession() (in the web app) is not finding anything. The web Activity is not storing this data. Any tips for this? — Danf, Jun 28 '20 at 21:10

score 0 · Answer 2 · answered May 16 '22 at 09:08

For someone who still need this.

First, you need add oauth setting to your Web application's AwsExports.json.

const AwsExports = {
  Auth: {
    ...
    oauth: {
      domain: 'xxx.auth.us-east-1.amazoncognito.com',
      scope:['openid'],
      redirectSignIn: 'https://example.com',
      redirectSignOut: 'https://example.com',
      responseType: 'token'
    }
  },
};

then you can pass token with uri.

const session      = await Auth.currentSession(),
      id_token     = session.getIdToken().getJwtToken(),
      access_token = session.getAccessToken().getJwtToken(),
      uri          = `https://example.com##id_token=${id_token}&access_token=${access_token}`;

You should actually setup oauth things. Because webview is opened as part of Oauth flow, oauth loggin out flow can be executed. so without proper setting of oauth, error comes up

How to pass an Amplify Cognito session from react native to webview?

2 Answers2