I've an issue with the deployment of my react app on Azure web app service.
I've followed this guide: https://developer.okta.com/blog/2018/07/10/build-a-basic-crud-app-with-node-and-react in local environment it works, but when I've tried to deploy on Azure app service the login with okta doesn't work.
So let me explain. I've uploaded node express server on Azure node app service. The react frontend i've uploaded the "npm run build" result in an other Azure app service.
I've added the Login redirect URI and trusted origins (cors) on okta admin panel.
But during the login the online version of my app replay this issue: "Not Found The requested URL /implicit/callback was not found on this server." and the URL is " https://supportexor.azurewebsites.net/implicit/callback*id_token=qwerqwerqwerqwerqwerqwer" .
In App.js
<Route path="/implicit/callback" component={ImplicitCallback} />
In index.js
const oktaConfig = {
issuer: ...,
redirect_uri: .../implicit/callback,
client_id: ...,
};
I would like to see the "SecureRoute" after the login into my app.
Related
I have deployed my react app using netlify and using auth0 authentication, on the local host, everything was working fine but after deployment and successfully login, the app is getting redirected to localhost:3000/collection, instead, I want it to redirect to https://tubemate/collection.netlify.app after successful login.
Application login URL
https://tubemate.netlify.app
Allowed callback URLs
https://tubemate/collection.netlify.app
Allowed logout URLs
https://tubemate.netlify.app
Allowed web origins
https://tubemate.netlify.app
I'm using Capacitor to create Android and iOS versions of my React webapp and now I'm trying to get firebase authentication working on Android and iOS.
I have allowed navigation inside the app to all domains and am using the redirect strategy for Firebase auth.
I have enabled the required authentication methods and they work fine in the web version.
The problem: instead of showing the authentication website, I only get a blank screen.
For reference: the code used for authentication:
const auth = firebase.auth()
const provider = new firebase.auth.GoogleAuthProvider()
auth.signInWithRedirect(provider)
And the capacitor.config.json:
{
"appId": "APP_ID",
"appName": "APP_NAME",
"bundledWebRuntime": false,
"npmClient": "yarn",
"webDir": "build",
"cordova": {},
"server": {
"hostname": "HOSTNAME_KNOWN_TO_FIREBASE",
"allowNavigation": ["*"]
},
"android": {
"allowMixedContent": true
}
}
Am I missing something? Any tips would be greatly appreciated!
Web-based firebase social authentication won't work with the capacitor. It is because the app tries to open the popup or redirect and it fails. In the case of phone authentication, it fails because the window object is not available in the app which is needed for ReCaptcha.
In order to authenticate in the mobile app, you will have to use a capacitor plugin.
capacitor-firebase-auth
Any chance you are getting an error 400 on your console? Likely you need to enable permissions for your sign-in provider (Google).
To do this, go to Firebase, click on Authentication, then Sign-in method, and change the status of your selected provider to be "Enabled".
Sign-in Provider Permissions
I'm following this link below on how to deploy React app to App Service Azure.
How to deploy React app to App service Azure
However, I couldn't see my application page but the Azure App service default page. "Hey, Node developers!"
Here, I have attached screenshots about the deployment condition and logs. [App service 1
Please advise.
Update:
Another method:
The premise of this method is you have Node.js env and have installed npm tools.
1.add a file name index.js under the site/wwwroot.
index.js:
var express = require('express');
var server = express();
var options = {
index: 'index.html' //Fill path here.
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);
2.install express:
run this command under the wwwroot directory,
npm install -save express
3.restart your app service and wait for minutes.
Original Answer:
First of all, you can follow this link to know how to deploy your react app to azure.
https://medium.com/microsoftazure/deploying-create-react-app-as-a-static-site-on-azure-dd1330b215a5
All of the files will be upload to D:/site/wwwroot, the physical folder.
Default page setting of the web app based on Linux os is very similar.
For example, I have a file named index.php under public_html folder and I want to set it as the default page of my web app.
You need to create a file named .htaccess under the wwwroot.
This is the content of the .htaccess file:
DirectoryIndex public_html/index.php
Then, Success set the default page:
I'm building a node + express server, with create-react-app to the frontend.
I used passportjs for auth routes handling, and all the stuff totally working on localhost ( backend on port 5000 and frontend on port 3000, with a proxy ).
When I deploy to Heroku, seems like the server can't recognize my auth routes and so heroku serve up static index.html.
If I test my APIs with Postman all seems to work ( I can see the html page for google oauth ), but with an anchor tag in my react app or manually writing the endpoint in the url, I can see only the same page reloading.
My server index.js:
const express = require('express')
const passport = require('passport')
const mongoose = require('mongoose')
const path = require('path')
// KEYS
const keys = require('./config/keys')
// MONGOOSE MODELS
require('./models/User')
mongoose.connect(keys.mongoURI)
// PASSPORT SETUP
require('./config/passport')
// CREATE THE SERVER
const app = express()
// EXTERNAL MIDDLEWARES
require('./middlewares/external')(app)
// ROUTE HANDLERS
require('./routes/authRoutes')(app)
// PRODUCTION SETUP
if (process.env.NODE_ENV === 'production') {
// express serve up production assets ( main.js, main.css )
app.use(express.static('client/build'))
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
})
}
// START THE SERVER
const PORT = process.env.PORT || 5000
app.listen(PORT)
Flow:
LOCALHOST:
react app starts -> I click 'Google Login' -> GET request to "/auth/google" -> google oauth flow -> redirect to "/" and my react app reappears, the user is logged in.
HEROKU:
react app on my-app.herokuapp.com/ -> click on "Google Login" -> the page reloads, nothing happens. the user is not logged in.
Please guys, help me.
Thanks
This is a result of the service worker being installed by default to make your app a Progressive Web App
To determine if this is an issue for you, test your heroku production mode app in incognito mode. The request for /auth/google should now reach the server and behave as it does in development.
Once you determine it is an issue, you can remove the
import registerServiceWorker from "./registerServiceWorker";
from your /client/src/index.js file.
You browser cache may already contain an installed service worker so you may have to
clear browser cache on a user browsers
uninstall the server worker programmatically
import { unregister } from './registerServiceWorker';
....
unregister();
I had the same issues with same symptoms exactly.
For me the cause was a typo in the keys: in server/config/prod.js I had a line reading cookieKey: process.env.COOKIE_KEY but in Heroku Config Variables that variable was named cookieKey. Renaming it to COOKIE_KEY inside Heroku solved the issue.
If you've followed the Stephen Grider tutorial one thing I'm wondering: Is your passport.js file in config or services? I see you've written in index.js: require('./config/passport')
whereas mine in index.js is require('./services/passport')
may not be your solution to the google oauth flow hanging in production but may help.
I'm working on a project using express.js and create-react-app.
The basic structure of the project is:
/.
|-- express-backend(:3001)
|---|---react-frontend:(:3000)
The express backend is serving on the port 3001 while the frontend is serving on the 3000. I don't have any problem in making this work, since I'm redirecting backend requests using proxy in the package.json
"proxy": "http://localhost:3001"
The only problem comes when I'm trying to redirect the user on a login page using app.use("/login", login).
I'd like to redirect users to a login.ejs page when he is on the url localhost:3000/login.
I'm only able to visualize the page when I visit localhost:3001/login.
How can I redirect the user to the static page login.ejs when he is on localhost:3000/login?
(I'm new on express, if you can give me an explanation with the answer I'd be very grateful)
app.use("/login", function(req,res){
res.redirect("login");
});
Now this login.ejs page should be available public folder which is accessible to user.